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

Posted 2023-02-22

【中文标题】使用 OR 运算符反应条件渲染

【英文标题】：React conditional rendering with OR operator

【发布时间】：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 && (

(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; []'. 通过定义道具“区域”。

【参考方案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

在您更新答案后仍然可能未定义对象