今回はES6でサブコンポーネントから親コンポーネントを呼び出す方法を紹介します。 ES6でサブコンポーネントが親コンポーネントを呼び出す際の注意点を実際に見てみましょう。
最近、ある目的で RN を再度勉強し始めて、チュートリアルを見て段階的に学習しているときに、最近、親子コンポーネントのメソッド呼び出しの問題に遭遇しました。
私は長い間 Baidu でこの質問をしてきました。JS の ES6 構文では、クラスを使用してコンポーネントを作成すると、子コンポーネントが親コンポーネントのメソッドを呼び出すときにシミュレーターがエラーを報告し続けます。
私が見たビデオはes5構文に基づいたコードなので、構文が少し異なります。
es5の構文ではメソッドのthisはRNがやってくれているので動画の例通りの効果が得られますが、es6では自分で書く必要があるようです。 。
具体的な書き方は、 this.xxxxx = this.xxxxx.bind(this);
を追加するか、サブコンポーネントをバインドするときに this.xxxxx.bind(this) と書くことです。
これです。多くは言う必要はありませんが、必要な人が参照できるようにコードをここに示します。
export default class TestPrj extends Component { constructor(props){ super(props); this.timesReset = this.timesReset.bind(this); this.state = {timex:2}; } timesReset(){ this.setState({ timex:0 }); } render() { return( <View style={styles.container}> <Son ref="Son1" timex={this.state.timex} timesReset={this.timesReset}/> //或者<Son ref="Son1" timex={this.state.timex} timesReset={this.timesReset.bind(this)}/> </View> ); } } class Son extends Component{ constructor(props){ super(props); this.state = {times:this.props.timex}; } componentWillReceiveProps(props){ console.log(this.props); this.setState({ times:props.timex }) } timesReset(){ this.props.timesReset(); } render(){ return( <View style={styles.container}> <Text style={styles.instructions}> 儿子:虽然你揍了我 {this.state.times} 次,但是我 永 不 屈 服!! </Text> <TouchableHighlight style={styles.btn} underlayColor={'pink'} onPress={this.timesReset.bind(this)}> <Text style={{textAlign:'center'}}>爹,再给你儿子一次机会!!</Text> </TouchableHighlight> </View> ); } }
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
以上がES6で子コンポーネントから親コンポーネントを呼び出す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。