Reactでウィザードコンポーネントを作成する最善の方法

Question

最近Reactの学習を開始しましたが、ウィザードコンポーネントを作成しようとしています。 は、もともと私はそれがこのように使用することができることを描いた：

<Wizard isVisible={this.state.isWizardVisible}> 
    <Page1 /> 
    <Page2 /> 
</Wizard> 

私はプロパティ、子供（ページ1、ページ2）への偶数成分を抽出したいとき（まだOOPの考え方を持つ）問題に走り始めましたウィザードの設定/上書き（タイトル、フッターコンポーネントなど）。

これはもちろん、Wizard.renderではコンポーネント自体にアクセスできないため、これは実行できません。

次に、私はthisウィザードを使ってrepoを見つけました。レポ内のコンポーネントは、ウィザードの現在のステップを設定するjavascriptオブジェクトであり、Reactコンポーネントを返すコンポーネントプロパティを含むStepsの配列で構成されます。

このアプローチは確かに問題を解決しますが、別の方法で実行できるかどうか、または各ページ/ステップコンポーネントが動作をカプセル化し、他のものをカプセル化しないように、途中で（レポのように）。

Answer 1

これを解決する「リアクション」の方法は、アプリケーション全体の状態をコンポーネント階層の最上部に保つことです。もちろんReactは本質的にMVCのVであり、データや状態ロジックをどのように管理するかについては敬遠されません。しかし、あなたが達成したいことは、このようなものです：

<Wizard isVisible={this.state.isWizardVisible}> 
    <GenericPage foo={something} bar={somethingElse} /> 
</Wizard> 

このロジックによって、ウィザードはあなたが提供する、とGenericPageは、現在のページをレンダリングする必要があるものは何でも伝承したいすべてのアプリケーションの状態にアクセスすることができます。状態を変更できるようにGenericPageコンポーネントが必要な場合は、関数を小道具としても渡します。

アプリケーション状態の変更を処理する一般的な方法を実装するフレームワークがいくつかあります。 FacebookにはFluxがありますが、Reduxはすべての右ボタンを押しているようで、選択の枠組みです。

Answer 2

あなたはとの小道具をmemoizing試すことができます。

https://github.com/gilbox/react-derive

、あなたはページ2コンポーネントへのPage1から小道具を渡すことができます。