小编Row*_*nb2的帖子

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

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

{regions && || regionsWithAnimals && (
  <>
    <h4>Title</h4>
    <div>
      <RegionsMap
        regions={regions || regionsWithAnimals.regions }
      />
    </div>
  </>
)}
Run Code Online (Sandbox Code Playgroud)

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

编辑:我可以写:

{regions &&  (
  <>
    <h4>Title</h4>
    <div>
      <RegionsMap
        regions={regions }
      />
    </div>
  </>
)}
Run Code Online (Sandbox Code Playgroud)

及以下:

{regionsWithAnimals && (
  <>
    <h4>Title</h4>
    <div>
      <RegionsMap
        regions={regionsWithAnimals.regions }
      />
    </div>
  </>
)}
Run Code Online (Sandbox Code Playgroud)

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

if-statement typescript reactjs conditional-rendering

1
推荐指数
1
解决办法
2972
查看次数