Reduxを使用したReactJの子要素の条件付きレンダリングのベストプラクティスは接続していますか？

Question

私の状況は、アプリケーションのストア状態に応じて、3つのコードブロックの1つを表示するログイン画面です。例：2番目の表示オプションが選択された場合は、結果としてレンダリングされます。

それぞれの表示オプションに固有の呼び出しとロジックがあり、独自のコンテナを保証するのに十分です。私のファイル構造は次のとおりです。

/components 
    /displayOpt1.jsx 
    /displayOpt2.jsx 
    /displayOpt3.jsx 
    /loginFormPage.jsx 
/containers 
    /displayOpt1.js 
    /displayOpt2.js 
    /displayOpt3.js 
    /loginFormPage.js 

私は親コンテナの中にあまりにも多くのロジックを埋め込むことなく、正しいオプションをレンダリングへの道を必要とします。実際には、ログインメカニズムのいずれかについて何も知る必要はないからです。私はそれを行うためのいくつかの方法を考えることができます。

1. loginFormPage.jsxに直接接続して、すべてのロジックをloginFormPage.jsにします。次に、コンポーネントを直接呼び出すloginFormPage.jsxの条件付きパラメータ。他の容器を取り除く。
2. loginFormPage.jsにReact.Componentを作成して、他のコンテナへの条件付きレンダリング呼び出しを行います。これはコンテナコンポーネントからすべての.jsxファイルを呼び出します。 loginFormPage.jsxは、選択した子を{props.children}でレンダリングします。
3. 2と同じですが、mergePropsパラメータの条件付きレンダリングコールはconnectに渡され、loginFormPage.jsになります。コンテナのjsコードにjsxコンポーネントを作成するのではなく、
4. わからない標準的な練習ですか？

今私はオプション3に傾いていますが、Googleの検索では推奨されている方法であるという証拠はありません。すべての考えを歓迎します。ありがとう。

---

多分それを容易にするためにいくつかのコード：

loginFormPage.jsx

<div> 
    <div onClick={props.someActionHeader}> 
    <h1>Login Form</h1> 
    </div> 
    <div className="formarea"> 
    // render the selected option here based on props.renderOptionChoice 
    // this will be one of displayOpt1, displayOpt2, displayOpt3 
    </div> 
    <div className="otherstuff">...</div> 
</div> 

displayOpt1.jsx - Opt2.jsxとOpt3.jsxコードは、この

のようなもののバリエーションです

<div onClick={props.someAction1}> 
    stuff... 
</div> 

loginFormPage.js

import LoginFormPage from '../components/loginFormPage' 

const mapStateToProps = (state, ownProps) => { 
    return { 
    renderOptionChoice: state.login.selectedLoginType, 
    } 
} 
const mapDispatchToProps = ... 

export default connect(mapStateToProps, mapDispatchToProps)(LoginFormPage) 

Answer 1

私は、ベストプラクティスであるとわかったもので答えることができます。質問に対する私のコメントの3つの記事を読む価値があります。

コンテナレベルには、表示されている内容が含まれている必要があります。いくつかのオプションがあるログイン画面では、「What's」は1つのファイルに表示されます。このスタイルに従うと、単一のファイルを見るだけで、特定の画面/コンポーネントに何が表示されているのかが明確になります。

だから、トップレベルで、レンダリングは、次のようになります。LoginStep1/2/3はReduxの状態に自分自身の接続にコンポーネントを含めることができ、またはそれはLoginPageで管理することができ

ここ

render() { 
    return (
     <LoginPage> 
      {this.state.step === STEPS.Step1 && <LoginStep1 />} 
      {this.state.step === STEPS.Step2 && <LoginStep2 />} 
      {this.state.step === STEPS.Step3 && <LoginStep3 />} 
     </LoginPage> 
    ) 
} 

ステップコードが非常に単純か強く関連しているかどうかを確認します。