如何在React的return块中编写JavaScript代码实现条件渲染

React JSX 中不能直接嵌入普通if控制语句，必须通过表达式写法实现条件渲染，以下是对应你的场景的几种可直接复用的实现方式：

单条件判断是否显示某个选项 #

如果需要满足某条件才渲染指定option，用&&逻辑运算符即可，注意所有JS逻辑必须包裹在{}中才能在JSX中生效：

return (
  <select
    onInput={(e) => onTyping(e.target.name, e.target.value)}
    name="site"
    id="site"
    onChange={handleInputChange}
  >
    <option value={myData.site}>{myData.site}</option>
    <option value="MAR">MARKHAM</option>
    {/* 示例：只有isOttawaVisible为true时才渲染OTTAWA选项 */}
    {isOttawaVisible && <option value="OTT">OTTAWA</option>}
  </select>
)

二选一渲染不同选项 #

如果需要在两种选项之间切换显示，用三元表达式：

return (
  <select
    onInput={(e) => onTyping(e.target.name, e.target.value)}
    name="site"
    id="site"
    onChange={handleInputChange}
  >
    <option value={myData.site}>{myData.site}</option>
    <option value="MAR">MARKHAM</option>
    {/* 示例：权限为admin显示OTTAWA，否则显示TORONTO */}
    {user.role === 'admin' 
      ? <option value="OTT">OTTAWA</option> 
      : <option value="TOR">TORONTO</option>
    }
  </select>
)

多条件批量渲染选项 #

如果有大量需要条件判断的选项，可提前在return外部处理好option列表再渲染，逻辑更清晰：

// return之前先处理要渲染的选项列表
const siteOptions = []
siteOptions.push(<option key={myData.site} value={myData.site}>{myData.site}</option>)
siteOptions.push(<option key="MAR" value="MAR">MARKHAM</option>)

// 多条件判断添加对应选项
if (user.role === 'admin') {
  siteOptions.push(<option key="OTT" value="OTT">OTTAWA</option>)
}
if (user.region === 'Canada') {
  siteOptions.push(<option key="VAN" value="VAN">VANCOUVER</option>)
}

return (
  <select
    onInput={(e) => onTyping(e.target.name, e.target.value)}
    name="site"
    id="site"
    onChange={handleInputChange}
  >
    {siteOptions}
  </select>
)

常见不生效原因排查 #

• 忘记把条件逻辑包裹在{}中，JSX会把你的代码当做普通文本处理
• 在{}中写了完整的if语句，if是控制语句不是表达式，无法直接在JSX中嵌入，必须转成上述的表达式写法
• 列表渲染的option没有加唯一key属性，会触发React警告，部分场景下会导致渲染异常

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