2016-04-18 10 views
1

私は3つのコンポーネントを持っています。 1つの親コンポーネントと2つの子コンポーネント(A、B)。第1の子コンポーネントAは、親コンポーネント機能をトリガするボタンを有する。親には、子コンポーネントBを表示するかどうかの切り替えがあります。子コンポーネントBが可視でなければ、それはマウントされます。 親から呼び出された関数の子AがコンポーネントBの関数を実行するようになりました。reactjsは、refsを介してコンポーネント間で通信します

子コンポーネントBにref属性を指定することで実現しようとしましたが、initの理由でマウントされていないので、this.refsは空です。 可能なすべての子コンポーネントB(またはそれ以降のC、D、E)を最初にマウントせずに、これをどのように達成できますか。

子AのonClickイベントは、常に参照イベントをトリガーすることが重要です。ここで

は、迅速なドラフトです:enter image description here

は誰が私に私の論理的な問題を解決するためのヒントを与えることはできますか?

+0

私は、各子(b-d)の 'componentWillReceiveProps'が投資する場所だと思います。隠されたものを無視する。あなたはEventEmmitersやreduxのようなもので「カンニング」することもできます。 – dandavis

答えて

1

次の行に反応して

親から呼び出された関数の子Aは、現在 成分B

で機能を実行には、奇妙な/無行くエリアです。親子コンポーネントの内部で関数を直接呼び出すことはできません。
親は子供に小道具を渡すことができる(できれば)ので、子はそれ自身の機能を開始することができます。私が正しく理解していれば

は、あなたは成分A)がクリックされたときに実行するために、子B内の機能を実行したいとB成分B)は、次のように

あなたはこれを達成することができます実装されている。

  • 親の内部に状態パラメータを追加します。 this.setState(childAClicked: true)、おそらく親内のコールバック関数内で、子Aによって呼び出されます。
  • このパラメータを子Bに渡します。子B内部<ChildB clickedA = {this.state.childAClicked} />
  • this.props.clickedAをチェックcomponentDidMount()ライフサイクルメソッドを追加し、真の場合は、子Bにもアップデートした後、関数を実行したい場合は、子B
  • の内側にあなたの関数を実行し、内部に同じチェックを追加componentDidUpdate()ライフサイクルメソッド

あなたには、いくつかの他のパラメータに基づいて、構成要素のみB、C、Dのいずれかの内部で関数を実行したい場合は、あなたの親の状態にも同様にこのパラメータを追加し、それを渡します他のB、C、D成分も含まれます。

+0

ああ、あなたはそうだよ...木の森は見えなかった。ありがとう – bdart

関連する問題