使用 Redux connect 在 ReactJs 中条件渲染子元素的最佳实践？

Question

我遇到的情况是登录屏幕显示 3 个代码块之一，具体取决于应用程序的商店状态。例如...如果选择了第二个显示选项，下面将是结果渲染。

<LoginFormPage>
  <DisplayOption2 />
</LoginFormPage>

每个显示选项都有特定的调用和逻辑，足以保证有自己的容器。我的文件结构是：

/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.但是在loginFormPage.js中传递给connect的mergeProps参数中执行条件渲染调用；而不是在容器 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)

Answer 1

我可以用我发现的最佳做法来回答。值得阅读我对问题的评论中的 3 个帖子。

容器级别应包含正在显示的内容。就具有多个不同选项的登录屏幕而言，所有内容都应显示在一个文件中。遵循这种风格，只需查看一个文件，就可以清楚地清楚显示在特定屏幕/组件上的内容。

因此在顶层，渲染将如下所示：

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

这里LoginStep1/2/3可以包含自己连接到Redux状态的组件，或者如果步骤代码非常简单或强相关，也可以在LoginPage级别进行管理。

使用 Redux connect 在 ReactJs 中条件渲染子元素的最佳实践？

Best practice for conditional rendering of children elements in ReactJs with Redux connect?

containers

components

structure

reactjs

redux