不使用三元运算符实现React多分支组件渲染的最佳实践

方案1：return前提前定义渲染内容（优先推荐） #

这是多分支渲染场景的最优方案，逻辑分层清晰，条件判断直观，后续扩展分支成本极低，代码可读性最好，还可以灵活插入其他中间逻辑。
可以直接声明变量存储渲染内容：

let renderContent
if (booleanValueOne) {
  renderContent = <TrueComponent props={props} />
} else if (booleanValueTwo) {
  renderContent = <TrueComponentTwo props={props} />
} else {
  // 注意给数组中的组件加唯一key，避免React抛出渲染警告
  renderContent = [
    <DefaultComponentOne key="default-1" props={props} />,
    <DefaultComponentTwo key="default-2" props={props} />,
  ]
}

return (
  <Container>
    {renderContent}
  </Container>
)

如果判断逻辑需要复用或者有参数依赖，也可以抽成独立函数：

const getRenderContent = (props) => {
  if (booleanValueOne) return <TrueComponent props={props} />
  if (booleanValueTwo) return <TrueComponentTwo props={props} />
  return [
    <DefaultComponentOne key="default-1" props={props} />,
    <DefaultComponentTwo key="default-2" props={props} />,
  ]
}

return (
  <Container>
    {getRenderContent(props)}
  </Container>
)

方案2：JSX内逻辑与串联（适合简单固定逻辑） #

如果不想在return外写额外代码，也可以直接在JSX内通过逻辑与判断渲染，适合分支数量少、逻辑不会频繁变更的场景：

return (
  <Container>
    {booleanValueOne && <TrueComponent props={props} />}
    {!booleanValueOne && booleanValueTwo && <TrueComponentTwo props={props} />}
    {!booleanValueOne && !booleanValueTwo && [
      <DefaultComponentOne key="default-1" props={props} />,
      <DefaultComponentTwo key="default-2" props={props} />,
    ]}
  </Container>
)

该方案缺点是如果后续新增分支，判断条件会越来越冗余，可读性快速下降。

不推荐方案：嵌套三元运算符 #

技术上可以实现多层三元嵌套，但可读性极差，维护成本很高，不建议使用：

// 不推荐，可读性差，不易排查问题
return (
  <Container>
    {booleanValueOne ? (
      <TrueComponent props={props} />
    ) : booleanValueTwo ? (
      <TrueComponentTwo props={props} />
    ) : (
      [
        <DefaultComponentOne key="default-1" props={props} />,
        <DefaultComponentTwo key="default-2" props={props} />,
      ]
    )}
  </Container>
)

注意：你原代码中直接返回组件数组没有给每个元素加key属性，React会抛出警告，建议补充唯一key值避免渲染异常。

内容的提问来源于stack exchange，提问作者cts