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

Question

我的应用程序中有一条路由，该路由可能会根据传递给它的状态而有很大不同。例如，假设我们有3个状态：state1，state2和state3。在这些状态的每个状态中都呈现了一些功能组件（例如页眉和页脚，但是它们的内容可能有所不同）。我还有其他组件只能在state1中呈现，其他组件只能在state2中呈现，等等。

我的问题是，以这种方式设置条件渲染以保持代码可伸缩和可维护的最佳方法是什么？

当前实施：当前，我将状态传递到每个下游组件中，并根据给定的状态在每个组件中处理我的条件渲染，通常使用switch语句。我已经开始遇到这样的问题：添加其他状态或修改要为特定状态渲染的内容会变得非常耗时且混乱。

选项一：我一直在考虑的第一个模式是为每个状态创建不同的视图。这些特定于状态的视图将仅包括我要针对该特定状态呈现的组件。然后，我可以将所有视图包装在一个更高阶的组件中，该组件将根据传递的状态呈现正确的视图。我觉得这个选项是可伸缩的/可维护的，但是我认为这也会导致很多重复的代码。例如：

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>
    )
  }
}

第二选项：我想到的另一个选择是创建一个单个的高级对象，该对象包含每个处于不同状态的每个下游组件所需的所有信息。该对象将包含在主路径中。例如，

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

现在，我可以根据传入的状态轻松提取所需的所有信息，并且可以通过道具将信息向下传递。我觉得此选项对于最大程度地减少重复代码非常有用，但是我认为路由组件将因此变得忙碌/复杂。

Answer 1

[我开发的应用程序具有类似的情况，许多州都非常麻烦。因此，您在第二种方法中提出的建议更好。拥有全局组件并根据您想要的状态进行渲染总是很好的。假设您有2个状态，并且想要显示2个不同的组件。

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

2。创建一个Home.js类，您可以在其中跟踪状态，并在其中导入上述两个组件，并根据条件进行渲染：

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>

)
}

}

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

随时提出任何疑问。