使用 OR 运算符反应条件渲染答案

【问题标题】：React conditional rendering with OR operator使用 OR 运算符反应条件渲染
【发布时间】：2020-07-21 21:45:27
【问题描述】：

是否可以在语句中使用 OR 运算符编写条件渲染？避免重复代码。

{regions && || regionsWithAnimals && (
  <>
    <h4>Title</h4>
    <div>
      <RegionsMap
        regions={regions || regionsWithAnimals.regions }
      />
    </div>
  </>
)}

像这样的东西，这当然行不通

编辑：我可以写：

{regions &&  (
  <>
    <h4>Title</h4>
    <div>
      <RegionsMap
        regions={regions }
      />
    </div>
  </>
)}

及以下：

{regionsWithAnimals && (
  <>
    <h4>Title</h4>
    <div>
      <RegionsMap
        regions={regionsWithAnimals.regions }
      />
    </div>
  </>
)}

这是我想要实现的，但我调用了两次相同的组件。

【问题讨论】：

“避免双码”是什么意思？
你的意思是三元运算符吗？请用正确的源代码描述你的问题，不清楚。
我可以写：``` {regions && (
Title

> )} ``` 及以下： ``` {regionsWithAnimals && (
Title

> )} ``` 这就是我想实现，但我调用了两次相同的组件。
(regions || regionsWithAnimals) && ... 虽然我应该在你的例子中指出，如果两者都是真的，它们都会渲染，但是你描述你想要的是一个或另一个渲染。只需将条件在组件中保持相同的顺序即可。
对不起各位，评论没有格式化。我用我想要实现的代码更新了 startpost。 @DrewReese 如果我这样做，它会给我错误Type '{ name: string; path: string; }[] | undefined' is not assignable to type 'regions'. Type 'undefined' is not assignable to type '{ name: string; path: string; }[]'. 通过定义道具“区域”。

标签： reactjs typescript if-statement conditional-rendering

【解决方案1】：

试试这样的：

{(regions || regionsWithAnimals && regionsWithAnimals.regions) && (
  <>
    <h4>Title</h4>
    <div>
      <RegionsMap
        regions={regions || regionsWithAnimals.regions  }
       />
    </div>
  </>
)}

【讨论】：

如果这样做，对象可能是未定义的
什么“对象”？
<RegionsMap regions={regions || regionsWithAnimals.regions } /> 对不起，我错过了一些代码。 regionWithAnimals.regions 可能未定义。如果我编写以下代码：regions={RegionsPerCountry || isRegion?.regions} 它将给出以下错误：Type '{ name: string; path: string; }[] | undefined' is not assignable to type 'regions'. Type 'undefined' is not assignable to type '{ name: string; path: string; }[]'.
我更新了答案，您还要检查 regionWithAnimals && regionWithAnimals.regions
在您更新答案后仍然可能未定义对象