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

Question

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

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

Answer 1

尝试这样的事情：

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