React条件渲染异常：||运算符未生效，组件仅特定值时显示

我在React中实现组件的显示/隐藏条件渲染逻辑，代码如下：

{
    selectedConfig === "house"      ||
    selectedConfig === "Zone"          ||
    selectedConfig === "Departament"  &&
    <div>
        <div className="flex flex-col w-1/2">
            <InputForn 
                text="Nom"
                name="nom"
                inputType="text"
                value=""
            />
        </div>
        <div className="flex flex-col w-1/2">
            <InputForn 
                text="URL "
                name="url"
                inputType="text"
                value=""
            />
        </div>
    </div>
}

当前仅当selectedConfig等于"Departament"时组件会显示，而selectedConfig为"house"或"Zone"时组件不显示，原因及修复方案如下：

问题原因 #

这是逻辑运算符的优先级和短路求值特性共同导致的：

1. &&的优先级高于||，你的表达式会被JavaScript解析为：

   selectedConfig === "house" || selectedConfig === "Zone" || (selectedConfig === "Departament" && <div>...</div>)
   

2. ||是短路求值：如果前面的条件为true（比如selectedConfig === "house"），表达式直接返回true这个布尔值。React渲染时会忽略布尔值、null、undefined这类假值（除了0），所以组件不会被渲染。
3. 只有当selectedConfig === "Departament"时，前两个||条件都为false，才会执行&&后的组件渲染逻辑，此时表达式返回组件本身，因此能正常显示。

修复方案 #

需要确保先判断是否满足任一显示条件，再决定是否渲染组件，推荐两种写法：

写法一：用括号包裹所有条件，配合&& #

{
  (selectedConfig === "house" || 
   selectedConfig === "Zone" || 
   selectedConfig === "Departament") &&
  <div>
    <div className="flex flex-col w-1/2">
      <InputForn 
        text="Nom"
        name="nom"
        inputType="text"
        value=""
      />
    </div>
    <div className="flex flex-col w-1/2">
      <InputForn 
        text="URL "
        name="url"
        inputType="text"
        value=""
      />
    </div>
  </div>
}

写法二：三元表达式（逻辑更清晰，支持else场景） #

{
  (selectedConfig === "house" || 
   selectedConfig === "Zone" || 
   selectedConfig === "Departament") ? (
    <div>
      <div className="flex flex-col w-1/2">
        <InputForn 
          text="Nom"
          name="nom"
          inputType="text"
          value=""
        />
      </div>
      <div className="flex flex-col w-1/2">
        <InputForn 
          text="URL "
          name="url"
          inputType="text"
          value=""
        />
      </div>
    </div>
  ) : null
}

另外注意：组件名InputForn疑似拼写错误，建议修正为InputForm。

内容的提问来源于stack exchange，提问作者jhon estrada