React仅渲染有效列表项时，何时用三元运算符而非逻辑运算符做条件渲染

两种条件渲染写法的核心区别 #

• 返回值差异（最关键区别）
  逻辑&&运算符的写法在条件不满足时，会返回条件本身的假值：你场景里如果items是空数组，items?.length的值为0，此时&&表达式会直接返回0。而React不会忽略0、空字符串''这类原始类型假值，会直接把0渲染到页面上，造成意料之外的显示问题。
  而三元运算符条件 ? 组件 : null的写法，不满足条件时固定返回null，React遇到null会直接跳过不渲染任何内容，不会有多余内容输出。
• 语义差异
  三元写法的语义更明确：明确表示「满足条件渲染目标组件，否则什么都不渲染」，后续如果需要补充空状态兜底，直接把null替换为空状态组件即可，扩展性更强。
  &&写法语义是「仅当条件为真时渲染后面的组件」，仅适合你能100%确定条件的假值一定是undefined/null（这两个值React不会渲染）的场景。

你的场景选择建议 #

优先选三元运算符返回null的写法。
你是基于接口返回的items做判断，接口有可能返回空数组，此时items?.length为0，用&&写法会直接渲染出0，导致界面bug。
如果确实想用&&的简化写法，可以先把条件转成布尔值，规避假值渲染问题，写法如下：

return !!items?.length && (
  <div>
    <MyBlock data={myBlockData} />
  </div>
);

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