通話とreactjsに親コンポーネントから子どもコンポーネントの関数に引数を渡す

Question

私はrefsを通じて、子コンポーネントに親から渡された私の引数が未定義またはその代わりに私が渡されたかの実際のイベントのいずれかであることが分かった。

は何ですか実際に引数を親コンポーネントから子コンポーネントの関数に渡す正しい方法は？私はrefsを使用していますが、実際には関数の引数の点で何も渡していないようです。

私はここケースを示しています。 https://codepen.io/adamchenwei/pen/gLMaPo/?editors=0010

あなたは私がconsole.log('child argument should be string');を書いた行を見れば基本的にはなく、実際にイベントで渡される引数でなければなりません。

私は間違っていたのだろうかと思います。

このシナリオでは、親コンポーネントのイベントを評価し、それに応じて特定の引数を渡して子関数をどのように実行する必要があるかを判断する必要があります。

Answer 1

子コンポーネントの親の小道具にアクセスする方法は2つしかありません。次の2つの方法を以下にこれを達成することができます -

1. 親から子コンポーネントへのパス値は、小道具を経由して
2. 子からの状態とディスパッチアクションで設定値を状態から値をフェッチします。代わりにREFを使用しての

Answer 2

、私は状態や小道具を使用します。

parentDoThing(event) { 
    const lifeTerms = { 
     heaven: 'yeeeeey', 
     hell: 'nooooooo', 
    } 
    if(event) { 
     this.setState({ lifeTerms: heaven }); 
    } else { 
     this.setState({ lifeTerms: hell}); 
    } 
} 

render() {  
    return (
     <section className="parent-comp" 
     onClick={this.parentDoThings}> 
     <ChildComponent 
      lifeTerms={this.state.lifeTerms}/> 
     <h1> Whats in App {this.state.text}</h1> 
     </section> 
);} 

と子コンポーネント上：

render() {  
    return (
     <section className="child"> 
     <section>this life is {this.state.life} </section> 
     <button onClick={this.doChildThings.bind(this, this.props.lifeTerms)}> Button </button> 
     </section> 
    ); 

Answer 3

は、親レベルstateを使用して組み合わせでcomponentWillUpdateを使用して、私の問題を解決しました私は子供の中のトリガが親によって提供された変更を引き起こすことを望まないので、子供の中にイベントを引き起こすために子にpropsとして渡されました。