React ネイティブの親コンポーネントと子コンポーネントの間で値を渡す方法

Reactで親コンポーネントと子コンポーネント間で値を渡す方法

React Native で親コンポーネントと子コンポーネントの通信間の双方向のデータ フローを実現するためのアイデアは次のとおりです。

1. 親コンポーネントは、子コンポーネントの初期化データとコールバック メソッドを含む 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 は関数ではありませんというエラーが報告されます。
理由:これは問題を示しています。getModeText (val) {} この関数は、子コンポーネントによって返された値を取得します。内部で変更する必要があるのは、親コンポーネントの状態です。現時点では、これは親コンポーネントを参照していないため、このエラーが報告されます。

解決：

1. 関数を渡すときにバインディングを追加します。

this.getModeText.bind(this)