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

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

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

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

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

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

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

<View>
  <AutoComponent navigate={this.props.navigation.navigate} />
</View>

子组件:

<RkButton rkType='rounded'
  onPress={() =>{
      this.props.navigate('ModeList')
  }
}>模式管理</RkButton>


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

constructor() {
	super();
	this.state = {
	        title:'标题'
	    };
};
render() {
	return (
    <View>
      <AutoComponent modeText={this.getModeText.bind(this)} />//要写this指向,不然会报错
    </View>
	);
};
getModeText(text){
//父组件接收text值
    this.setState({
      title:text
    });
  }

子组件某个方法里执行:

this.props.color('blue');

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

解决办法:

  1. 传入函数时加一个绑定:
this.getModeText.bind(this)

你可能感兴趣的:(React,Native,react.js,javascript,前端)