顺传
通过props传值
举个：父控件给子控件传递一个name属性的值，子控件展示父控件传递过来的值：
// 子组件
class SonComponent extends Component {
render(){
return (
);
}
}
// 父组件
class FatherComponent extends Component {
render(){
return (
);
}
}
// 主组件
export default class RNDemoOne extends Component {
render() {
return (
);
}
}
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 (
{this.state.number}
);
}
}
// 父组件
class FatherComponent extends Component {
render(){
return (
{
this.refs.son.addClick(this.refs.son.state.number + 1)
}}>{"+"}
);
}
}
// 主组件
export default class RNDemoOne extends Component {
render() {
return (
);
}
}
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 (
{"+"}
);
}
}
// 父组件
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 (
{this.state.number}
);
}
}
// 主组件
export default class RNDemoOne extends Component {
render() {
return (
);
}
}
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 (
弟弟
收到{this.state.money}零花钱
);
}
}
// 哥哥组件
class GeGeComponent extends Component {
render(){
return (
哥哥
{
DeviceEventEmitter.emit('makeMoney', 100)
}}>发生活费
);
}
}
// 主组件
export default class RNDemoOne extends Component {
render() {
return (
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
didiStyle: {
flex: 1,
backgroundColor: '#F5FCFF',
justifyContent: 'center',
alignItems: 'center',
},
gegeStyle: {
flex: 1,
justifyContent: 'center',
alignItems:'center',
},
});
点击发送生活费，就可以看到弟弟能接收到生活费。
好了，组件间传值就讲到这里了