Javascript 最"；“反应”；具有多个不同渲染的方法

我希望这个问题不要太主观。我最近做了很多React开发，我有一个标题，它曾经有两个不同的渲染

最近我的客户要求另外两个渲染。我可以在渲染中嵌套条件，但这让我觉得很混乱，而且不利于良好实践

例如，我有：

{this.state.headerLoc ? (
  <div className="secondary-nav">
   ...
   </div>
  ) : (
  <Back />
  )}

{this.state.headerLoc(
...
) : (
)}

我想在此基础上添加两个附加条件-是否有一种“干净”的方法来实现这一点，而不需要大量的额外嵌套？重构/子组件是处理这种情况的唯一方法吗

编辑：我想做的伪代码示例：

render {
  if(page == 'page1') {
    <renderX />
  }
  else if(page == 'page2') {
    <renderX2 />
  }
  else if(page == 'page3') {
    <renderX3 />
  }
  else if(page == 'page4') {
    <renderX4 />
  }
}

渲染{
如果（第=='page1'）{
}
否则如果（第=='page2'）{
}
否则，如果（第=='page3'）{
}
否则，如果（第=='page4'）{
}
}

编辑：更新我现在正在做的事情：

const HeaderArrays = {
  FrontPage: ["/"],
  SearchPage: ["cards", "map", "detail"],
  NonSearchPage:[],
  NonSearchPageHamburger:["settings"],
}

HeaderComponents() {
  var routerPath = this.props.router.location.pathname;
  for (const component in HeaderArrays) {
    const value = HeaderArrays[component];
    if(HeaderArrays[component].includes(routerPath)) {
      return component;
    }
   return "FrontPage";
 }

render() {

  const ComponentToRender = this.HeaderComponents();
  return(
    <ComponentToRender />

const headerrays={
首页：[“/”]，
搜索页面：[“卡片”、“地图”、“详细信息”]，
非搜索页：[]，
非搜索页面汉堡：[“设置”]，
}
HeaderComponents（）{
var routerPath=this.props.router.location.pathname；
用于（表头阵列中的常量组件）{
常量值=头阵列[组件]；
if（HeaderArray[component]。包括（routerPath））{
返回组件；
}
返回“FrontPage”；
}
render（）{
const componentorender=this.HeaderComponents（）；
返回(

您只需将组件映射到对象中的一个键，这样您就可以省略一堆if-else语句

const HeaderComponents = {
  page1: Page1HeaderComponent,
  page2: Page2HeaderComponent,
  page3: Page3HeaderComponent,
  page4: Page4HeaderComponent
}

而且用法也会很简单

render() {
  const { page } = this.props // assuming page comes from props
  const ComponentToRender = HeaderComponents[page]
  return <ComponentToRender />
}

render（）{
const{page}=this.props//假设页面来自props
const componentorender=头组件[第页]
返回
}

---

听起来您已经知道最佳实践是什么。将其分解为功能组件将使其更易于使用。例如，

const SecondaryNav=（props）=>{…}

是的，我想这可能是最好的做法，但不完全确定，因为我是新手，不确定是否有更好的逻辑设计类型在渲染中复制if/else if/else if块？还是我在反模式中思考？你的伪代码已经足够好了。不要过度思考k太多了！我要做的唯一一件事就是把它改成一个

开关
语句完美的问题。哦，太棒了，这太干净了。谢谢你了。@AndrewAlexander是的，每当我有两个以上的条件时，我通常都会用这种方式映射元素。它更明确，可读性更强，在处理智慧时帮助很大h动态数据集：）完美的答案。只是一个问题-它们是类组件吗？还是它们必须是哑的？因为我尝试了一种变体，并得到了错误：“使用了不正确的大小写。对React组件使用PascalCase，对HTML元素使用小写。”是的，它可以是任何类或功能组件。只是一个映射。如果你想更新你在问题中遇到的问题。或者一个代码沙盒，我可以修复它：）