1

データの複数のタブページを使用する React + Flux アプリケーションがあります。各タブページには同じ種類のデータ (請求書など) が表示されますが、別のオブジェクトからのものです。この件に関して私が読んだ他の投稿に基づいて、請求書を表示するすべてのタブページの「請求書」オブジェクトを含む「InvoiceStore」にコレクションを作成することにしました。

すべてのタブ (請求書の詳細内) には、複数のウィジェットのようなコンポーネントがあります。これらのコンポーネントは、複数のレイヤーにネストされています。

課題は、データを表示する必要がある請求書オブジェクトをすべてのコンポーネントが認識している必要があることです。請求書 (タブ) の最上位コンポーネントからその子孫のそれぞれにデータ (実際のデータまたは請求書コレクション内のアイテムの「キー」) を渡すことで、それを調整できることはわかっていますが、それは、中間は、受け取ったプロパティをその子に渡す必要があります。これは私にはやり過ぎのように思えます。

1 つのコンポーネントとその子孫のスコープを持つある種の変数を持つことは可能ですか? それとも、この課題に対する別の種類の「標準化された」ソリューションはありますか?

提案は本当に感謝しています!

4

2 に答える 2

2

ES7 スプレッド オペレーターの提案に基づくJSX スプレッド属性を使用して props を渡すことができます。{...this.props}

これにより、親で受け取ったすべての小道具が分解され、子に渡されます。ときどき、すべての props を渡したくない場合があり、明示的に渡したい props をくまなく調べる (または追加する) 必要があります。そのためには、ES6 で利用可能な新しい分割構文を使用すると便利な場合があります。

例：

<MyChildComponent
  foo={bar}
  baz={qux}
  {...this.props}
/>

this.context を使用した文書化されていないハッキーな手法もありますが、その API は不安定であり、変更される可能性があります。スプレッド演算子は、現在 React チームが推奨する手法です。

于 2015-03-27T18:22:02.837 に答える