this.props.childrenのReact.jsデザインプラクティス

Question

私はReactでスピードアップしていると思いますが、私が確信していないことは、どのように最善を尽くすかです。

私はそれに3つのウィジェットを持つページを持っています。私はすべてのウィジェットで同じ動作とスタイルを使いたいので、スタイリングとレイアウトを担当する<PageAreaTemplate/>タグで各コンポーネントをラップします。このアプローチの1つの理由は、私がPageAreaTemplateまたは別のテンプレートを望まないところの内部コンポーネントを使用することです。

PageAreaTemplate私は簡単にスタイリングに必要なコンポーネントのthis.props.childrenをラップします。

これでウィジェットのいくつかに、PageAreaTemplate（テンプレートで囲んだ場合）のヘッダーにツールバー（それぞれ異なる）を追加する必要があります。 childrenを複製し、setToolbarをPageAreaTemplateに追加することで可能ですが、それは確かに正しいとは感じません。

これを達成するための最良の方法は何ですか？

Answer 1

子要素を取り込んでクローンし、わずかに変更したものを返すのはかなり一般的なことです。追加のプロパティや機能を追加することになります。

function renderChildren(props) { 
    return React.Children.map(props.children, child => { 
    return React.cloneElement(child, { 
     setToolbar:() =>() 
    }) 
    }) 
} 

これはちょうど、現在の子の操作に反対Object.assignとして、あなたが言うように、現在の子を拡張します。

上記の関数を使用すると、必要なものを確実に得るために必要なロジックを追加できます。コンポーネントのタイプ、またはいくつかのプロパティ値のチェック

Answer 2

@ kelly-j-andrewsで提案されているアプローチを使用して親コンポーネントにツールバーを設定することで問題を解決しましたが、実際にはツールバーの更新を行い、内部コンポーネントの状態を設定することで、内部コンポーネントの更新が親コンポーネントのレンダリングをトリガーすることはないため、内部コンポーネントの状態を設定することによって変更できます。私がやってしまった何

である：外成分（PageAreaTemplate）において

1. Iはそれぞれの子をクローニングし、上記の例によれば、それを修正しました。内部成分で
、ツールバー上のボタンをクリックするので、初期成分
3. を設定するライフサイクル関数呼び出しcomponentDidMountでsetToolbarを実行は、内部コンポーネントの状態を変更し、私は再びツールバー（setToolbar）に設定しますcomponentDidUpdateを使用して、外側のコンポーネントのレンダリングを強制します。以前の段階でsetToolbarを呼び出すと、更新前の状態を反映するツールバーが表示されます。

これは新しいものではないかもしれないが、私の問題は親にコンポーネントを設定することができることも確認してください内部成分中の状態が適切に私は自分の質問に答え、ツールバーに反映されて作っていただけでなくので、 。

これは最適な解決策ではないと思いますが、やはり動作しています...！