ReactJS两个组件进行通信

最佳方法取决于您计划如何安排这些组件。现在想到的一些示例场景：

1. <Filters />

   是的子组件

   <List />

2. 这两个

   <Filters />

   和

   <List />

   是一个父组件的孩子

3. <Filters />

   并

   <List />

   完全存在于单独的根组件中。

可能还有其他我没有想到的情况。如果您的不适合这些，请告诉我。以下是一些我如何处理前两种情况的非常粗糙的示例：

场景1

您可以将处理程序从传递

<List />

<Filters />

onChange

＃1的JSFiddle→

var Filters = React.createClass({  handleFilterChange: function() {    var value = this.refs.filterInput.getDOMNode().value;    this.props.updateFilter(value);  },  render: function() {    return <input type="text" ref="filterInput" onChange={this.handleFilterChange} placeholder="Filter" />;  }});var List = React.createClass({  getInitialState: function() {    return {      listItems: ['Chicago', 'New York', 'Tokyo', 'London', 'San Francisco', 'Amsterdam', 'Hong Kong'],      nameFilter: ''    };  },  handleFilterUpdate: function(filterValue) {    this.setState({      nameFilter: filterValue    });  },  render: function() {    var displayedItems = this.state.listItems.filter(function(item) {      var match = item.toLowerCase().indexOf(this.state.nameFilter.toLowerCase());      return (match !== -1);    }.bind(this));    var content;    if (displayedItems.length > 0) {      var items = displayedItems.map(function(item) {        return <li>{item}</li>;      });      content = <ul>{items}</ul>    } else {      content = <p>No items matching this filter</p>;    }    return (      <div>        <Filters updateFilter={this.handleFilterUpdate} />        <h4>Results</h4>        {content}      </div>    );  }});React.renderComponent(<List />, document.body);

场景2

与方案1类似，但父组件将是将处理程序函数传递给的组件

<Filters />

<List/>

<List />

<Filters />

＃2的JSFiddle→

var Filters = React.createClass({  handleFilterChange: function() {    var value = this.refs.filterInput.getDOMNode().value;    this.props.updateFilter(value);  },  render: function() {    return <input type="text" ref="filterInput" onChange={this.handleFilterChange} placeholder="Filter" />;  }});var List = React.createClass({  render: function() {    var content;    if (this.props.items.length > 0) {      var items = this.props.items.map(function(item) {        return <li>{item}</li>;      });      content = <ul>{items}</ul>    } else {      content = <p>No items matching this filter</p>;    }    return (      <div className="results">        <h4>Results</h4>        {content}      </div>    );  }});var ListContainer = React.createClass({  getInitialState: function() {    return {      listItems: ['Chicago', 'New York', 'Tokyo', 'London', 'San Francisco', 'Amsterdam', 'Hong Kong'],      nameFilter: ''    };  },  handleFilterUpdate: function(filterValue) {    this.setState({      nameFilter: filterValue    });  },  render: function() {    var displayedItems = this.state.listItems.filter(function(item) {      var match = item.toLowerCase().indexOf(this.state.nameFilter.toLowerCase());      return (match !== -1);    }.bind(this));    return (      <div>        <Filters updateFilter={this.handleFilterUpdate} />        <List items={displayedItems} />      </div>    );  }});React.renderComponent(<ListContainer />, document.body);

场景3

当组件无法在任何类型的父子关系之间进行通信时，文档建议设置全局事件系统。