如何根据来自其他组件的事件更新组件 URL

Question

我正在开发一个包含 3 个组件的应用程序：Component1、Component2 和 Component3。所有组件都使用 AJAX 从 RESTful 服务检索数据。 Component1 将在应用程序初始化后检索数据列表。 Componet1 中的每个项目都是一个 link，单击时将根据其 key/id 检索 Component2 的数据。 Component2 也是如此，它将以相同的方式检索 Component3 的数据。

所以如果我们想象以下主要成分：

var ComponentItems = React.createClass({
    render: function() {
        return <li className="list-group-item" key={this.props.data.id}><a onClick={this.handleClick}>{this.props.data.name}</a></li>;        
    },
    handleClick: function () {
      this.props.onClick(this);
    }
});

var Component1 = React.createClass({
    getInitialState: function() {
      return {componentsList: []};
    },
    componentWillMount: function() {
      $.ajax({
        url: this.props.url,
        dataType: 'json',
        success: function(data) {
          this.setState(data);
          console.log(data);
        }.bind(this),
        error: function(xhr, status, err) {
          console.error(this.props.url, status, err.toString());
        }.bind(this)
      });
    },
    render: function() {
        var componentItems = this.state.componentsList.map(function (item) {
            return <ComponentItem data={item} onClick={this.handleClick} />;
        });
        return (
            <div className="col-lg-3">
                <ul className="list-group">
                    {componentItems}
                </ul>
            </div>
        );
    },
    handleClick: function (aComponent) {
      alert("test");
    }
});    
var MainComponent = React.createClass({
    render: function() {
        return (
        <div>
            <Component1 url="/api/dataSource1/" />
            <Component2 />
            <Component3 />
        </div>
        );
    }
});

如您在此示例中所见，我尚未实施 Component2 或 Component 3。但是当单击 ComponentItem 时，我想用它的键在 Component2 中调用 AJAX URL，例如。如果项目有键 3：

<Component2 url="/api/dataSource2/3`>

我不确定我应该如何构建程序以及点击处理是否应该在 MainComponent 或 Component1 内完成？

另一件可能有点超出本例范围的事情是 Component 2 的多项选择，它将传递 key/id.

的数组

Answer 1

我认为最好在 MainComponent 中处理点击，因为它可以直接访问 component2。

在ComponentItem

var ComponentItem = React.createClass({
  render: function() {
    return <li className="list-group-item" key={this.props.data.id}><a onClick={this.handleClick}>{this.props.data.name}</a></li>;        
  },
  handleClick: function () {
    this.props.onClick(this.props.data);
  }
});

在Component1 render 方法可以像下面这样获取点击项的键。

handleClick: function (aComponent) {
  this.props.onClick(aComponent);
}

render: function() {
    var componentItems = this.state.componentsList.map(function (item) {
        return <ComponentItem data={item} onClick={this.handleClick.bind(this)} />;
    }, this);
    return (
        <div className="col-lg-3">
            <ul className="list-group">
                {componentItems}
            </ul>
        </div>
    );
},

在 MainComponent 中，您可以引用 Component2，一旦事件被捕获，您就可以执行类似下面的操作

var MainComponent = React.createClass({
      handleClick: function(index){
        this.refs.component2.setState({
          url: '/api/dataSource2/' + index
        });
      },
      render: function() {
          return (
          <div>
              <Component1 url="/api/dataSource1/" onClick={this.handleClick}/>
              <Component2 ref="component2" />
              <Component3 />
          </div>
          );
      }
  });

希望这对您有所帮助。

如何根据来自其他组件的事件更新组件 URL

How to update components URL based on events from other components

javascript

ajax

jquery

reactjs