使用Redux連接條件呈現ReactJs中的子元素的最佳做法？

我的情況是一個登錄屏幕，顯示3個代碼塊之一，具體取決於應用程序的商店狀態。例如...如果選擇了第二個顯示選項，則下面將顯示結果。使用Redux連接條件呈現ReactJs中的子元素的最佳做法？

對於每個顯示選項都有特定的調用和邏輯，以保證它們自己的容器。我的文件結構是：

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

我需要一種方法來使正確的選項不嵌入太多邏輯集成到父容器;因爲它確實不需要知道任何有關任何登錄機制。我可以想到一些方法來做到這一點。

所有在loginFormPage.js邏輯與直接連接到loginFormPage.jsx。然後在loginFormPage.jsx中直接調用組件的條件參數;刪除其他容器。
在loginFormPage.js中創建React.Component以對其他容器執行條件呈現調用;這將調用容器組件中的所有.jsx文件。然後loginFormPage.jsx將使用{props.children}呈現選定的孩子。
與2相同，但執行mergeProps參數中的條件呈現調用傳遞給connectloginFormPage.js;而不是在容器js代碼中創建一個jsx組件。
我不知道的一些標準做法？

現在我傾向於選項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)

來源

2017-08-10 Shammoo

你是什麼意思「調用」一個JSF文件？我不認爲，任何這些接近都是首選。添加一些代碼，以便我們可以瞭解您的應用程序的實際操作，以及可能的好方法。 – trixn

這已完成，請讓我知道這是否有幫助。 – Shammoo

對於任何有興趣的人，如果你自己有這個問題。我推薦閱讀。 - [設計師的想法。他實際上在1和2之間改變了主意。]（https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0） - [意見篇幫助你理解]（https：// jaketrent .com/post/smart-dumb-components-react /） - [與其他人一致的偉大風格指南。見3.4]（https://gist.github.com/datchley/4e0d05c526d532d1b05bf9b48b174faf）文章的結果是他們建議選項2.是出於各種原因去的最佳方式。 – Shammoo

我可以用我發現的最佳實踐來回答。值得閱讀我對這個問題的評論中的3篇文章。

容器級別應該包含正在顯示的內容。就具有多個不同選項的登錄屏幕而言，所有內容應該在一個文件中呈現。按照這種風格，只需查看單個文件即可清楚地瞭解特定屏幕/組件上顯示的內容。

所以在頂層，呈現的樣子：

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

這裏/ 2/3可包含的組件與自己連接到Redux的狀態，或者它可以在LoginPage管理LoginStep1級別如果步驟代碼非常簡單或強烈相關。

來源

2017-11-23 18:57:04 Shammoo

使用Redux連接條件呈現ReactJs中的子元素的最佳做法？

回答

相關問題