React Native 复杂条件渲染设计模式

Question

我的应用程序中有一条路线可能会根据传入的 state 有很大差异。 例如，假设我们有 3 个状态：state1、state2 和 state3。 在每种状态下都会呈现一些功能组件（例如 header 和页脚，但它们的内容可能会有所不同）。 我还有其他组件只能在 state1 中呈现，其他组件只能在 state2 中呈现，等等。

我的问题是，在这条路线中设置条件渲染以保持代码可扩展和可维护的最佳方法是什么？

当前实现：目前，我将 state 传递给每个下游组件，并根据给定的 state 处理每个组件内部的条件渲染，通常使用 switch 语句。 我已经开始遇到这样一个问题，即添加另一个 state 或修改我想要为某个 state 呈现的内容变得既耗时又混乱。

选项一：我一直在考虑的第一个模式是为每个 state 创建不同的视图。 这些 state 特定视图将仅包括我希望为该特定 state 呈现的组件。 然后我可以将所有视图包装在一个更高阶的组件中，该组件将根据传递的 state 呈现正确的视图。 我觉得这个选项将是可扩展/可维护的，但是我认为它也会导致大量重复代码。 前任：

switch (currentState) {
  case "state1":
    return <State1Component />
  case "state2":
    return <State2Component />
  ...
}

State1Component 看起来像这样：

class State1Component extends Component {
  state = {
    headerText: "lorem ipsum",
    componentText: "..."
    ...
  }

  render() {
    return (
      <View>
        <Header headerText={headerText} />
        ...
      </View>
    )
  }
}

第二个选项：我想到的另一个选项是创建一个单一的高级 object，其中包含每个不同 state 的每个下游组件所需的所有信息。 这个 object 将包含在主路由中。 例如，

stateObject = {
  state1: {
    header: {
      renderComponent: true,
      text: "Welcome to state1"
    },
    component1: {
      renderComponent: false,
    },
    ...
  },
  state2: {
  ...
  }
  ...
}

现在，我可以根据传入的 state 轻松提取我需要的所有信息，并且可以通过 props 向下传递信息。 我觉得这个选项对于最小化重复代码很有用，但是我认为路由组件会因此变得忙碌/复杂。

Answer 1

我做了一个应用程序，情况类似，很多州，太麻烦了。 所以你在第二种方法中建议的更好。 拥有全局组件并根据您想要的 state 进行渲染总是好的。 假设您有 2 个状态并且想要显示 2 个不同的组件。

1. 创建要分别在 state1 和 state2 上渲染的两个文件 X.js 和 Y.js。

2.制作一个Home.js class，在其中跟踪state，并在其中导入上述两个组件并根据条件进行渲染：

import X from 'X.js'
import Y from 'Y.js'

class Home extends Component {

constructor(props){
super(props)
this.state={
state1:false,
state2:true
}
}


render(){

return(
<View>
{this.state.state1?<X />:<View />}
{this.state.state2?<Y />:<View />}
</View>

)
}

}

这不仅增加了代码的可读性，而且您实际上遵循了分解每个组件的分形文件夹结构。

随时提出任何疑问。