在编写React程序的时候,大家会遇到很多React组件之间的通信问题,主要分为以下3种:
1.父组件向子组件传值;
2.子组件向父组件传值;
3.没有任何嵌套的组件之间的传值(如兄弟组件之间传值)-后续章节介绍;
一、父组件向子组件传值
1.在父组件中通过属性传递给子组件,在子组件中通过this.props获取信息;
1.父组件向子组件传值;
2.子组件向父组件传值;
3.没有任何嵌套的组件之间的传值(如兄弟组件之间传值)-后续章节介绍;
一、父组件向子组件传值
1.在父组件中通过属性传递给子组件,在子组件中通过this.props获取信息;
'use strict';
import React from 'react';
import {
... ...
} from 'react-native';
//父组件
var MyAwesomeApp = React.createClass({
getInitialState: function(){
return{
checked: false
};
},
render: function(){
return (
<View style={styles.pagecontainer}>
//通过属性this.state.xxx往子组件传递信息
<ChildCompontent text='Toggle me' checked={this.state.checked}/>
</View>
)
}
});
//子组件
var ChildCompontent = React.createClass({
render: function() {
return (
//通过this.propps.xxx从父组件获取信息,使用父组件传递的信息{xxx}
<View style={styles.childcompontent}>
<Text>{this.props.text}</Text>
<Switch value={this.props.checked}></Switch>
</View>
)
}
});
var styles = StyleSheet.create({
... ...
});
AppRegistry.registerComponent('MyAwesomeApp', () => MyAwesomeApp);
运行如下如: