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

是否可以在语句中使用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>
  </>
)}

{regionsWithAnimals&&(
标题
)}

---

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

尝试以下方法：

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

{（地区| |地区有动物&&Regionwithanimals.regions）&&(
标题
)}

你说的“避免双重编码”是什么意思？你说的是三元运算符吗？请用正确的源代码描述你的问题，它不清楚。我可以写：`{regions&&&（Title）}``和下面：`{regionsWithAnimals&&（Title）}``这是我想要实现的，但我调用了两次相同的组件。

（regions | regionsWithAnimals）&&&…

虽然我应该在您的示例中指出，如果两者都是真的，那么它们会各自渲染，但您描述的是希望其中一个渲染。只需在组件中保持条件的相同顺序。对不起，伙计们，注释没有格式化。我用我想要实现的代码更新了startpost@DrewReese如果我这样做，它将给我错误

类型“{name:string；path:string；}[]| undefined”不能分配给类型“regions”。类型“undefined”不可分配给类型“{name:string；path:string；}[]”。

通过定义道具“regions”。如果这样做，对象可能未定义什么“Object”？

很抱歉，我错过了一些代码。regionswithanies.regions可能未定义。如果我编写以下代码：

regions={regionsporcountry | | isRegion？.regions}

它将给出以下错误：

类型{name:string；path:string；}[]|未定义的“不可分配给类型“regions”。类型“未定义的”不可分配给类型“{name:string；path:string；}[]“。

我更新了答案，您还可以检查RegionWithAnimals&&RegionWithAnimals。更新答案后，RegionStill对象可能未定义