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你