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

我正在开发一个应用程序，其中有三个组件：Component1、Component2和Component3。所有组件都使用AJAX从RESTful服务中检索数据。Component1将在应用程序初始化后检索数据列表。Componet1中的每个项目都是一个链接，单击后将根据其键/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数组。