React循环组件通信

Question

比方说，我有一个循环，在每次迭代中呈现两个组件。告诉Component1（并将数据传递给它，重新渲染Component1），点击Component2的最有效方法是什么？ I.e：

render(){ 
    return (
     this.props.data.map((data) => { 
      <Component1 data={data} /> 
      <div> 
       <Component1> // this one should also know Component2 changed 
      </div> 
      <Component2 data={data} click={doSomethingWithComponent1} /> 
     }) 
    ); 
} 

Pubsub不是我可以使用的解决方案。

Answer 1

广泛的问题。两个可能的答案，a）传递一个函数并包装一个父项，并b）使用Flux。

使用Flux，您可以让Component2触发一个动作，让商店知道数据已更改，因此侦听该存储的所有组件都将自动更新。

下面是你如何传递一个函数和包装与父母做到这一点：

var Hello = React.createClass({ 
    render: function() { 
     return <div>Hello {this.props.name}</div>; 
    } 
}); 

var Goodbye = React.createClass({ 
    render: function() { 
     return <div>Goodbye {this.props.name} <p onClick={this.props.clickMe}>Click me!</p></div>; 
    } 
}); 

var Parent = React.createClass({ 
    getInitialState: function() { 
     return { 
      name: 'Unknown user' 
     }; 
    }, 
    passMe: function() { 
     this.setState({name: 'User with name!'}); 
    }, 
    render: function() { 
     return (<div> 
      <Hello name={this.state.name} /> 
      <Goodbye name={this.state.name} clickMe={this.passMe} /> 
     </div>); 
    } 
}); 

这里有一个Fiddle playground你