基于条件的嵌套组件的条件渲染[重复]答案

【问题标题】：Conditional rendering of nested components based on condition [duplicate]基于条件的嵌套组件的条件渲染[重复]
【发布时间】：2021-07-29 14:29:45
【问题描述】：

不确定如何将以下嵌套 if/else 编写为 React 应用程序中的嵌套三元组，即

if (jobId === 1) {
  if (activeFlag === 1) {
    <RenderA />
  } else if (activeFlag === 2) {
    <RenderB />
  } else if (activeFlag === 3) {
    <RenderC />
  }
}

我试过了：

{
 (jobId === 1) ?
    (activeFlag === 1) ? (<RenderA />) : (activeFlag === 2) ? (<RenderB />) 
}

不确定我是否走在正确的轨道上？

【问题讨论】：

如果有 if else 条件，可以使用三元运算符。从我在这里看到的情况来看，如果 jobId 不是 1 并且类似地，如果 activeFlag 的值不是 1,2,3，则您不会渲染任何内容
考虑把这个逻辑放在它自己的函数或组件中，然后返回你要渲染的JSX。然后你可以调用这个函数，或者将它作为一个组件使用
你可以创建一个对象字面量：const map = { 1: RenderA, 2: RenderB, etc }，然后像const component = map[activeFlag]一样获取基于activeFlag的组件。如果没有找到，返回null
当问题被标记为重复时，我正在为我的解决方案编写测试用例，因此我将其发布为as an answer to the "primary" question。（我并不是说这是在反应中处理渲染的最佳方式，但它回答了您提出的问题，而不是类似的问题。）

标签： javascript reactjs conditional-operator

【解决方案1】：

试试这个jobId === 1 ? activeFlag === 1 ? <RenderA /> : activeFlag === 2 ? <RenderB /> : activeFlag === 3 && <RenderC /> : ""

【讨论】：

这不会检查jobId === 1 的RenderB 和RenderC
@adiga 你确定这不起作用吗？如果是，请检查此链接replit.com/@sahilardeshna/AdmirablePitifulTrial#index.js
对于jobId = 2, activeFlag = 2，由于第一个if (jobId === 1) 检查，OP 的代码不会返回任何内容。但是，您的代码将返回 RenderB，因为您只有 jobId === 1 检查 RenderA
@adiga 是的，你是对的，答案已更新。谢谢
现在可以使用了。但是，OP 的代码很容易理解，而嵌套 ?: 的代码不可读。因此，没有理由使用此代码。

【解决方案2】：

一个更易读的解决方案是创建一个内联渲染函数

const renderThisThing = () => {
  if (jobId !== 1) {
    return null
  }

  if (activeFlag === 1) {
    return <RenderA />
  }

  if (activeFlag === 2) {
    return <RenderB />
  }

  if (activeFlag === 3) {
    return <RenderC />
  }

  return null
}


const elementToIncludeInTheJSX = renderThisThing()

然后把{elementToIncludeInTheJSX}放在你要渲染组件的地方。你可以在你的组件体中内联这个函数，或者把它变成一个真正的 React 组件，然后将 jobId 和 activeFlag 作为 props 传递。

function ComplexRenderComponent({ jobId, activeFlag }) {
  if (jobId !== 1) {
    return null
  }

  if (activeFlag === 1) {
    return <RenderA />
  }

  if (activeFlag === 2) {
    return <RenderB />
  }

  if (activeFlag === 3) {
    return <RenderC />
  }

  return null
}

你在你的组件中使用它作为<ComplexRenderComponent jobId={jobId} activeFlag={activeFlag} />。

【讨论】：