React JSX中如何用三元运算符替换短路与条件渲染写法

改写说明 #

• 你提到的判断逻辑简化是成立的：JavaScript中数字0为假值，所有大于0的数字为真值，不需要显式写length > 0的比较，直接取数组的length属性即可作为判断条件。
• 替换为三元运算符时，由于不满足条件时无需渲染任何内容，假值分支返回null即可，React不会对null渲染任何DOM节点。
• 顺手清理了原代码里的冗余语法：map回调多余的大括号、return关键字，以及onClick回调里多余的函数体大括号。

三元运算符实现版本 #

{suggestedTags.length ? (
  <div className={classes.tagSuggestionWrapper}>
    {suggestedTags.map((tag) => (
      <div
        key={tag}
        className={classes.tagSuggestion}
        onClick={() => selectTag(tag)}
      >
        {tag}
      </div>
    ))}
  </div>
) : null}

补充说明 #

如果没有假值分支的特殊渲染需求，其实短路与&&的写法比三元更精简，简化后的短路写法如下：

{suggestedTags.length && (
  <div className={classes.tagSuggestionWrapper}>
    {suggestedTags.map((tag) => (
      <div
        key={tag}
        className={classes.tagSuggestion}
        onClick={() => selectTag(tag)}
      >
        {tag}
      </div>
    ))}
  </div>
)}

注意避坑：不要直接用数组本身suggestedTags作为判断条件，JavaScript中空数组[]属于真值，即使数组长度为0也会触发后续渲染，必须通过length属性判断。

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