React-Native ：组件之间的通信-1

在编写React程序的时候，大家会遇到很多React组件之间的通信问题，主要分为以下3种：
    1.父组件向子组件传值；
    2.子组件向父组件传值；
    3.没有任何嵌套的组件之间的传值（如兄弟组件之间传值）-后续章节介绍；
一、父组件向子组件传值
1.在父组件中通过属性传递给子组件，在子组件中通过this.props获取信息；

[javascript]  view plain  copy

1. 'use strict';  
2. import React from 'react';  
3. import {  
4.   ... ...  
5. } from 'react-native';  
6. //父组件  
7. var MyAwesomeApp = React.createClass({  
8.   getInitialState: function(){  
9.     return{  
10.       checked: false  
11.     };  
12.   },  
13.   render: function(){  
14.     return (  
15.       <View style={styles.pagecontainer}>  
16.         //通过属性this.state.xxx往子组件传递信息  
17.         <ChildCompontent text='Toggle me' checked={this.state.checked}/>  
18.       </View>  
19.     )  
20.   }  
21. });  
22.   
23.   
24. //子组件  
25. var ChildCompontent = React.createClass({  
26.   render: function() {  
27.     return (  
28.       //通过this.propps.xxx从父组件获取信息，使用父组件传递的信息{xxx}  
29.       <View style={styles.childcompontent}>  
30.         <Text>{this.props.text}</Text>  
31.         <Switch value={this.props.checked}></Switch>  
32.       </View>  
33.     )  
34.   }  
35. });  
36. var styles = StyleSheet.create({  
37.   ... ...  
38. });  
39. AppRegistry.registerComponent('MyAwesomeApp', () => MyAwesomeApp);  

运行如下如：

2.如果嵌套的层次太深，那么从外往内组件传递会比较纠结，需要通过props一层一层往下传递（当然你可以精简组件的层次）；

[javascript]  view plain  copy

1. 'use strict';  
2. import React from 'react';  
3. import {  
4.   ... ...  
5. } from 'react-native';  
6. //父组件  
7. var MyAwesomeApp = React.createClass({  
8.   render: function(){  
9.     return (  
10.       <View style={styles.pagecontainer}>  
11.         <ChildCompontent1 text='Toggle me too'/>  
12.       </View>  
13.     )  
14.   }  
15. });  
16. // 子组件1：中间嵌套的组件，使用this.props.xxx从父组件获取的信息，通过属性传递给自己的子组件  
17. var ChildCompontent1 = React.createClass({  
18.   render: function() {  
19.     return (  
20.       <ChildCompontent2 text={this.props.text}/>  
21.     )  
22.   }  
23. });  
24. ... ...  
25. // 子组件n：子组件n-1的子组件，通过this.props获取它的父组件传递进来的信息  
26. var ChildCompontentn = React.createClass({  
27.   render: function() {  
28.     return (  
29.       <View style={styles.childcompontent}>  
30.         <Text>{this.props.text}</Text>  
31.       </View>  
32.     )  
33.   }  
34. });  
35. var styles = StyleSheet.create({  
36.   pagecontainer: {  
37.     flex: 1,  
38.     flexDirection:'column',  
39.   },  
40.   ... ...   
41. });  
42. AppRegistry.registerComponent('MyAwesomeApp', () => MyAwesomeApp);  

运行如下：

二、子组件向父组件传值
1.子组件控制自己的state，然后通过父组件提供的回调方法，告诉父组件信息并在组件展示出来；
2.其实是依赖于props来传递事件的引用，并通过回调的方式来实现；
3.如果嵌套太深的话，就必须一次次回调传入的回调函数，来实现子组件向父组件传值或者操作；

[javascript]  view plain  copy

1. 'use strict';  
2. import React from 'react';  
3. import {  
4.   ... ...  
5.   View,  
6. } from 'react-native';  
7. // 父组件  
8. var MyAwesomeApp = React.createClass({  
9.   getInitialState: function () {  
10.     return {  
11.       checked: false  
12.     };  
13.   },  
14.   //子组件回调方法，更新父组件的状态机  
15.   onChildChanged: function (newState) {  
16.     this.setState({  
17.       checked: newState  
18.     });  
19.   },  
20.   render: function(){  
21.     var isChecked = this.state.checked ? 'yes' : 'no';  
22.   
23.   
24.     return (  
25.       <View style={styles.pagecontainer}>  
26.         <Text>Are you checked:{isChecked}</Text>  
27.         //向子组件传递属性和回调方法  
28.         <ChildCompontent text='Toggle me'  
29.           initialChecked={this.state.checked}  
30.           callbackParent={this.onChildChanged}/>  
31.       </View>  
32.     )  
33.   }  
34. });  
35. // 子组件  
36. var ChildCompontent = React.createClass({  
37.   getInitialState: function () {  
38.     return {  
39.       //从父组件获取初始化值  
40.       checked: this.props.initialChecked  
41.     };  
42.   },  
43.   render: function() {  
44.     return (  
45.       <View style={styles.childcompontent}>  
46.         <Text>{this.props.text}</Text>  
47.         <Switch value={this.state.checked} onValueChange={(value)=>{  
48.           // 子组件，调用回调方法传回信息，注意：setState 是一个异步方法，所以需要操作缓存的当前值  
49.           this.setState({checked: value});  
50.           this.props.callbackParent(this.state.checked);  
51.         }}/>  
52.       </View>  
53.     )  
54.   }  
55. });  
56. var styles = StyleSheet.create({  
57.   ... ...  
58. });  
59. AppRegistry.registerComponent('MyAwesomeApp', () => MyAwesomeApp);  

运行如下：
 
4.多个子组件使用同一个回调的情况，当子组件改变的时候，使用同一个子组件的回到来给父组件返回值；

[javascript]  view plain  copy

1. 'use strict';  
2. import React from 'react';  
3. import {  
4.   AppRegistry,  
5.   ... ...  
6. } from 'react-native';  
7. // 父组件  
8. var MyAwesomeApp = React.createClass({  
9.   getInitialState: function () {  
10.     return {  
11.       initialChecked: false,  
12.       totalChecked: 0  
13.     };  
14.   },  
15.   //所以子组件回调该方法，传回最新的信息,根据传回信息计算总共选中的个数  
16.   onChildChanged: function (newState) {  
17.     var newTotal = this.state.totalChecked + (newState ? 1 : -1);  
18.     this.setState({  
19.       totalChecked: newTotal,  
20.     });  
21.   },  
22.   render: function(){  
23.     var isChecked = this.state.checked ? 'yes' : 'no';  
24.   
25.     return (  
26.       <View style={styles.pagecontainer}>  
27.         <Text>How many are checked:{this.state.totalChecked}</Text>  
28.         //多个子组件，统计回调父组件的onChildChanged方法  
29.         <ChildCompontent text='Toggle me'  
30.           initialChecked={this.state.initialChecked}  
31.           callbackParent={this.onChildChanged}/>  
32.         <ChildCompontent text='Toggle me too'  
33.           initialChecked={this.state.initialChecked}  
34.           callbackParent={this.onChildChanged}/>  
35.         <ChildCompontent text='Toggle me too too '  
36.           initialChecked={this.state.initialChecked}  
37.           callbackParent={this.onChildChanged}/>  
38.       </View>  
39.     )  
40.   }  
41. });  
42. // 子组件  
43. var ChildCompontent = React.createClass({  
44.   getInitialState: function () {  
45.     return {  
46.       checked: this.props.initialChecked  
47.     };  
48.   },  
49.   render: function() {  
50.     return (  
51.       <View style={styles.childcompontent}>  
52.         <Text>{this.props.text}</Text>  
53.         <Switch value={this.state.checked} onValueChange={(value)=>{  
54.           this.setState({checked: value});  
55.           this.props.callbackParent(this.state.checked);  
56.         }}/>  
57.       </View>  
58.     )  
59.   }  
60. });  
61. var styles = StyleSheet.create({  
62.   ... ...  
63. });  
64. AppRegistry.registerComponent('MyAwesomeApp', () => MyAwesomeApp);