React组件间信息传递方式

1. <span style="font-size:18px;">//父组件  
2. var MyContainer = React.createClass({  
3.   getInitialState: function () {  
4.     return {  
5.       checked: false  
6.     };  
7.   },  
8.   render: function() {  
9.     return (  
10.       <ToggleButton text="Toggle me" checked={this.state.checked} />  
11.     );  
12.   }  
13. });  
14.   
15. // 子组件  
16. var ToggleButton = React.createClass({  
17.   render: function () {  
18.     // 从（父组件）获取的值  
19.     var checked = this.props.checked,  
20.         text = this.props.text;  
21.   
22.     return (  
23.         <label>{text}: <input type="checkbox" checked={checked} /></label>  
24.     );  
25.   }  
26. });</span>  

1. <span style="font-size:18px;">var Button = React.createClass({  
2.   render: function() {  
3. return (  
4.       <button style={{background: this.props.color}}>  
5.         {this.props.children}  
6.       </button>  
7.     );  
8.   }  
9. });  
10. var Message = React.createClass({  
11.   render: function() {  
12. return (  
13.       <div>  
14.         {this.props.text} <Button color={this.props.color}>Delete</Button>  
15.       </div>  
16.     );  
17.   }  
18. });  
19. var MessageList = React.createClass({  
20.   render: function() {  
21. var color = "purple";  
22. var children = this.props.messages.map(function(message) {  
23. return <Message text={message.text} color={color} />;  
24.     });  
25. return <div>{children}</div>;  
26.  }  
27. });</span>  

以上的例子中第一层组件（MessageList）想要将color值传递到第三层组件（Button），通过第二层组件（Message）进行了传递。进而实现了。但是这种方式，并不是很优雅，如果传递的层级更多时，中间的层级都需要来传递，数据的传递变的更加繁琐。所以我们就会想到，是否可以"越级"获取数据。这时候就需要使用context。能帮你 "越级" 传递数据到组件中你想传递到的深层次组件中。

  二.（父组件）向更深层的（子组件） 进行传递信息  >>利用（context）

利用context，改进后的代码如下：

1. <span style="font-size:18px;">var Button = React.createClass({  
2.   // 必须指定context的数据类型  
3.   contextTypes: {  
4.     color: React.PropTypes.string  
5.   },  
6.   render: function() {  
7.     return (  
8.       <button style={{background: this.context.color}}>  
9.         {this.props.children}  
10.       </button>  
11.     );  
12.   }  
13. });  
14.   
15. var Message = React.createClass({  
16.   render: function() {  
17.     return (  
18.       <div>  
19.         {this.props.text} <Button>Delete</Button>  
20.       </div>  
21.     );  
22.   }  
23. });  
24.   
25. var MessageList = React.createClass({  
26.   //父组件要定义 childContextTypes 和 getChildContext()   
27.   childContextTypes: {  
28.     color: React.PropTypes.string  
29.   },  
30.   getChildContext: function() {  
31.     return {color: "purple"};  
32.   },  
33.   render: function() {  
34.     var children = this.props.messages.map(function(message) {  
35.       return <Message text={message.text} />;  
36.     });  
37.     return <div>{children}</div>;  
38.   }  
39. });</span>  

以上代码中通过添加 childContextTypes 和 getChildContext() 到 第一层组件MessageList （ context 的提供者），React 自动向下传递数据然后在组件中的任意组件（也就是说任意子组件，在此示例代码中也就是 Button ）都能通过定义 contextTypes（必须指定context的数据类型） 访问 context 中的数据。这样就不需要通过第二层组件进行传递了。

指定数据并要将数据传递下去的父组件要定义 childContextTypes 和 getChildContext() ；想要接收到数据的子组件 必须定义 contextTypes 来使用传递过来的 context 。

    三.（子组件）向（父组件）传递信息

来看下面的例子

以上例子中，在父组件绑定callbackParent={this.onChildChanged}，在子组件利用this.props.callbackParent(newState),触发了父级的的this.onChildChanged方法，进而将子组件的数据（newState）传递到了父组件。
这样做其实是依赖 props 来传递事件的引用，并通过回调的方式来实现的。

 四.没有任何嵌套关系的组件之间传值（比如：兄弟组件之间传值）

如果组件之间没有任何嵌套关系，组件嵌套层次比较深，我们该怎样去传递信息呢？

下面来看一个例子

这个例子需要引入一个PubSubJS 库，通过这个库你可以订阅的信息，发布消息以及消息退订。
PubSubJS 具体可参考下面的内容http://blog.csdn.net/u011439689/article/details/51955991

ProductSelection和Product本身是没有嵌套关系的，而是兄弟层级的关系。但通过在ProductSelection组件中订阅一个消息，在Product组件中又发布了这个消息，使得两个组件又产生了联系，进行传递的信息。所以根据我个人的理解，当两个组件没有嵌套关系的时候，也要通过全局的一些事件等，让他们联系到一起，进而达到传递信息的目的。

 五.利用react-redux进行组件之间的状态信息共享

如果是比较大型的项目，可以使用react-redux，这方面的资料可以参考阮一峰的网络日志。
地址：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.