使用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中的子元素的最佳做法？

回答

相关问题