-1

反応コンポーネントのすべての子要素のリストを取得したい。

例えば:

親.js

<Parent>
   <SomeComponent/>
</Parent>

SomeComponent.js

<SomeComponent>
   <ChildElement1/>
   <ClhidElement2/>
</SomeComponent>

だからParent.js私は取得したいChildElement1ChildElement2. それは可能ですか?

私のユースケースは次のとおりです。

フォーム フィールド (フィールド コンポーネント) をジェネリック フォーム コンポーネントに渡しています。Form 要素は、デフォルト値のオブジェクトとその他のもの (関連する CRUD/リソースなど) を受け取ります。そして、これらの値をフィールドに注入する必要があります。すべてのフィールドを 1 つずつ渡して繰り返しを避ける代わりに、「UserFields」などのコンテナーをいくつか作成しました。これらは Fields コンポーネントを持つコンテナーです。したがって、UserFields の Fields を読み取るには Form が必要です。しかし、フィールドは既に UserFields 内にあるため、それらを取得する方法がわかりません。

4

2 に答える 2

1

子コンポーネントが配列内からマップされていると考えています<SomeComponent />

親の中でこれを試してください

state = {
   child: []
}
renderChildren = () => {
   if(this.state.child.length > 0) {
      return this.state.child.map(e => {
          return (
             <div>{e}</div>
          )
      })
   }
}
returnChild = (data) => {
   var child = [];
   for(var i = 0; i < data.length; i++) {
      child.push(data[i])
   }
   this.setState(prevState => ({child: [...prevState.child, child]}));
}
return (
    <div>
       <SomeComponent returnChild={(child) => this.returnChild(child)} />
       {this.renderChildren()}
    </div>
)

<SomeComponent />このメソッドを他のコードと一緒にこのようにコンポーネントに追加します。

onGettingMoreChild = (child) => {
    this.props.returnChild(child)
}

onGettingMoreChild新しい子が作成されるたびに呼び出すことを忘れないでください。

このコードはテストしていません。必要に応じて遊んでください。childまた、メソッドに関してビュー全体を渡すことを忘れないでくださいonGettingMoreChild

childに渡される変数の例onGettingMoreChild

<div>I am child one!!</div>
于 2018-07-13T01:27:39.767 に答える
1

Reactは一方向のデータ フローと次のFluxアーキテクチャになるように設計されているため、ベスト プラクティスを維持するために、常にトップダウン (双方向ではなく親から子) です。

ただし、 react を reduxReact Contextで実装するなど、いくつかのオプションでそれらを実現できます。

于 2018-07-13T01:30:10.847 に答える