最近、ある目的で RN を再度勉強し始めて、チュートリアルを見て段階的に学習しているときに、最近問題に遭遇しました。それは、親子コンポーネントのメソッド呼び出しの問題です。私はこの問題を Baidu で長い間探していました。JS の ES6 構文では、クラスを使用してコンポーネントを作成すると、サブコンポーネントが親コンポーネントのメソッドを呼び出し、シミュレーターがエラーを報告し続けます。この記事では主に、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> ); } }
関連する推奨事項:
Vuejs2.0 子コンポーネントは親コンポーネントのメソッドを呼び出します
vue は ref を使用して親コンポーネントに子コンポーネントのインスタンスを呼び出させます
Vue2.0 間の関係について親コンポーネントと子コンポーネント イベントの送受信
以上が子コンポーネントは親コンポーネントのメソッド インスタンスを呼び出します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。