react.js javascript 前端 react native 父组件与子组件之间如何相互传值

react 中父组件与子组件之间如何相互传值

实现React Native 中父子组件通信间的双向数据流，思路如下：

1.父组件向子组件传递props,其中props 中带有子组件的初始化数据以及回调方法；

2.子组件手动触发父函数传递进来的回调方法，同时将子组件的数据传递出去。

PS.使用 props 来传递事件，并通过回调的方式实现，这样的实现其实不是特别好，但在没有任何工具(redux)的情况下不失为一种简单的实现方式

父组件给子组件传值：props 父组件：

子组件：

onPress={() =>{

this.props.navigate('ModeList')

}

}>模式管理

子组件向父组件传值：子组件里使用this.props… 父组件里：

constructor() {

super();

this.state = {

title:'标题'

};

render() {

return (

//要写this指向，不然会报错

);

};

getModeText(text){

//父组件接收text值

this.setState({

title:text

});

}

子组件某个方法里执行：

this.props.color('blue');

报错 this.setState is not a function 原因： this的指向问题。 getModeText (val) {}这个函数获取的是子组件返回的值，而内部需要修改的是父组件的 state。这时this 就指的不是父组件，就会报这个错误

解决办法：

传入函数时加一个绑定：

this.getModeText.bind(this)

金钥匙