React条件渲染：能否用OR运算符避免重复代码？

算力阿峰

2026-5-7

解决React条件渲染中OR运算符的使用问题

首先，你原来的代码里regions && || regionsWithAnimals && (...)是语法错误——逻辑运算符&&和||不能连续这样写，JS引擎无法识别这种写法。咱们来调整一下，既实现你要的“任一条件满足就渲染，且避免重复代码”的需求，又保证代码合法。

基础优化写法

如果你的需求是：只要regions存在（为真值）或者regionsWithAnimals存在，就渲染那段JSX，并且给RegionsMap传入regions（如果存在），否则传入regionsWithAnimals.regions，可以这么写：

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

这里的逻辑是：

外层的(regions || regionsWithAnimals)判断是否满足渲染条件，只要其中一个为真，就执行后面的JSX渲染。
内层的regions || regionsWithAnimals.regions会优先取regions的值，如果regions是假值（比如null/undefined），再取regionsWithAnimals.regions。

更严谨的写法（推荐）

如果regions可能是空数组或者0这类“假值但有实际业务意义”的情况，推荐用??（空值合并运算符）代替||，它只会在左边是null或undefined时才取右边的值，避免误判：

// 先提取目标regions，让逻辑更清晰
const targetRegions = regions ?? regionsWithAnimals?.regions;

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

这里的regionsWithAnimals?.regions用了可选链运算符，能避免regionsWithAnimals为null/undefined时访问regions导致的报错。