React中如何将嵌套if/else改写为嵌套三元实现组件条件渲染

写法正确性判断 #

你的实现思路方向是对的，核心逻辑就是通过嵌套三元运算符匹配嵌套if的层级判断，但当前写的代码不完整，缺少activeFlag === 3的分支判断，也没有给所有条件不匹配的场景补充兜底返回值，不符合三元运算符的语法要求，运行会直接报错。

正确完整写法 #

{
  jobId === 1 
    ? activeFlag === 1
      ? <RenderA />
      : activeFlag === 2
        ? <RenderB />
        : activeFlag === 3
          ? <RenderC />
          : null // activeFlag不是1/2/3时不渲染
    : null // jobId不等于1时不渲染
}

注意：三元运算符必须严格遵循判断条件 ? 条件成立返回值 : 条件不成立返回值的结构，不允许缺省任意分支的返回值，无内容需要渲染时返回null即可。

可选优化方案 #

如果后续判断分支会继续增加，嵌套三元的可读性会大幅下降，推荐改用对象映射的写法，维护更方便：

// 提前定义渲染组件映射关系
const renderComponentMap = {
  1: <RenderA />,
  2: <RenderB />,
  3: <RenderC />
}

// JSX中渲染逻辑
{
  jobId === 1 ? renderComponentMap[activeFlag] ?? null : null
}

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