顺传
通过props传值
举个🌰：父控件给子控件传递一个name属性的值，子控件展示父控件传递过来的值：
// 子组件
class SonComponent extends Component {
render(){
return (
<View style={styles.sonViewStyle}>
<Text style={{fontSize: 20}}>这是父视图传递过来的数据:{this.props.name}</Text>
</View>
);
}
}
// 父组件
class FatherComponent extends Component {
render(){
return (
<View style={styles.container}>
<SonComponent name={this.props.name}/>
</View>
);
}
}
// 主组件
export default class RNDemoOne extends Component {
render() {
return (
<View style={styles.container}>
<FatherComponent name="scott"/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'red',
},
sonViewStyle: {
flex: 1,
backgroundColor: '#F5FCFF',
justifyContent: 'center',
alignItems: 'center',
},
});
上述代码的数据传递其实是这样的: 主组件 -> FatherComponent -> SonComponent。
但是有时候，我们并不是在创建 子组件 的时候就传递值，而是需要等待某个触发事件的时候，再传递，这就涉及到获取子组件传值。
通过ref拿到组件，然后传值
举个🌰：通过点击屏幕上的 + 号按钮，实现没点击一次，让SonComponent的输出数字加1。
// 子组件
class SonComponent extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
number: 1
};
}
addClick(number){
this.setState({
number: number
});
}
render(){
return (
<View style={styles.sonViewStyle}>
<Text style={{fontSize: 20}}>{this.state.number}</Text>
</View>
);
}
}
// 父组件
class FatherComponent extends Component {
render(){
return (
<View style={styles.container}>
<SonComponent ref="son" number={this.props.number}/>
<View style={styles.fatherViewStyle}>
<Text style={{fontSize: 40}} onPress={() => {
this.refs.son.addClick(this.refs.son.state.number + 1)
}}>{"+"}</Text>
</View>
</View>
);
}
}
// 主组件
export default class RNDemoOne extends Component {
render() {
return (
<View style={styles.container}>
<FatherComponent number={1}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
sonViewStyle: {
flex: 1,
backgroundColor: '#F5FCFF',
justifyContent: 'center',
alignItems: 'center',
},
fatherViewStyle: {
flex: 1,
justifyContent: 'center',
alignItems:'center',
},
});
逆传
使用方法回调：
在父组件定义一个处理接收值的方法
把这个方法传递给子组件，并且绑定this，子组件就能通过this.props拿到这个方法调用
举个例子，同样是点击屏幕上的 + ，让屏幕上的数字 加 1。（ps：和上面通过ref拿到子组件，传递的代码有区别，注意组件层级)
// 子组件
class SonComponent extends Component {
addClick(){
this.props.receiveNumber()
}
render(){
return (
<View style={styles.sonViewStyle}>
<Text style={{fontSize: 40}} onPress={this.addClick.bind(this)}>{"+"}</Text>
</View>
);
}
}
// 父组件
class FatherComponent extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
number: 1
};
}
receiveNumber(){
var m = this.state.number;
m += 1;
this.setState({
number: m
});
}
render(){
return (
<View style={styles.container}>
<SonComponent receiveNumber={this.receiveNumber.bind(this)}/>
<View style={styles.fatherViewStyle}>
<Text style={{fontSize: 20}}>{this.state.number}</Text>
</View>
</View>
);
}
}
// 主组件
export default class RNDemoOne extends Component {
render() {
return (
<View style={styles.container}>
<FatherComponent/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
sonViewStyle: {
flex: 1,
backgroundColor: '#F5FCFF',
justifyContent: 'center',
alignItems: 'center',
},
fatherViewStyle: {
flex: 1,
justifyContent: 'center',
alignItems:'center',
},
});
通知
当两个组件之间互相拿不到谁的时候，可以用通知传值。比如当两个组件是同一层级关系的时候（兄弟关系）。
举个🌰： 点击发送生活费，哥哥就给弟弟发送100生活费。
// 弟弟组件
class DiDiComponent extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
money: 0
};
}
componentDidMount() {
// 添加监听者
this.listener = DeviceEventEmitter.addListener('makeMoney', (money) => {
this.setState({
money: money
});
})
}
componentWillUnmount() {
// 销毁监听者
this.listener.remove();
}
render(){
return (
<View style={styles.didiStyle}>
<Text>弟弟</Text>
<Text>收到{this.state.money}零花钱</Text>
</View>
);
}
}
// 哥哥组件
class GeGeComponent extends Component {
render(){
return (
<View style={styles.gegeStyle}>
<Text>哥哥</Text>
<Text onPress={()=>{
DeviceEventEmitter.emit('makeMoney', 100)
}}>发生活费</Text>
</View>
);
}
}
// 主组件
export default class RNDemoOne extends Component {
render() {
return (
<View style={styles.container}>
<DiDiComponent/>
<GeGeComponent/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
didiStyle: {
flex: 1,
backgroundColor: '#F5FCFF',
justifyContent: 'center',
alignItems: 'center',
},
gegeStyle: {
flex: 1,
justifyContent: 'center',
alignItems:'center',
},
});
点击发送生活费，就可以看到弟弟能接收到生活费。
好了，组件间传值就讲到这里了
