React条件渲染非循环静态元素报unique key缺失警告

这不是React把条件渲染误判为列表，核心是JSX插值渲染和React子节点diff的逻辑边界问题：

• 所有写在{}里的插值表达式返回值，会和直接写的静态节点一起，被归到父容器的同级子节点序列里。你用{results && <PopOverBlockContent />}这种短路写法时，条件不成立时表达式返回results本身（可能是false、null、空数组甚至数字0），条件成立时返回组件节点。
• 在React 16.x到17.0早期版本中，如果父容器下同时存在直接写的静态节点和相邻插值返回的节点，框架做子节点收集时会临时把插值返回的节点归为列表结构做diff，这时候就会触发key校验。
• 你加了key={2}依然报警告，原因有两个：一是纯数字key可能和React默认给无key节点分配的索引key冲突；二是短路逻辑返回假值时，key没有附着在实际渲染的节点上，框架比对节点序列时识别不到稳定的节点标识。
• 内部map循环里给div和PopoverDataRows设置同一个result.id作为key不会触发上层警告——key的作用域是同父节点，这两个元素分属不同父级，重复key不违规。

按优先级尝试，可直接解决问题：

• 把短路与写法改成显式三元判断，条件不满足时明确返回null，不要让表达式返回非React节点类型的假值，同时把key改成字符串格式的固定标识，避免和默认索引key冲突：

return (
  <div>
    <PopOverBlockContent>
      {/* 原有内容 */}
    </PopOverBlockContent>

    {results ? (
      <PopOverBlockContent key="result-popover-block">
        {/* 原有内容 */}
        {results.map((result) => (
          <div key={result.id}>
            {/* 这里PopoverDataRows是div的唯一子节点，不需要重复加key，可删掉冗余key */}
            <PopoverDataRows {...etc} />
          </div>
        ))}
      </PopOverBlockContent>
    ) : null}
  </div>
)

• 如果改完三元仍有警告，给条件渲染的节点套一层带稳定key的空Fragment，把key挂在Fragment上即可：

{results ? (
  <React.Fragment key="result-block-wrapper">
    <PopOverBlockContent>
      {/* 原有内容不变 */}
    </PopOverBlockContent>
  </React.Fragment>
) : null}

• 以上两种都无效的话，检查PopOverBlockContent组件的内部实现：如果组件内部用React.Children.map遍历children做二次处理，没有给遍历生成的节点补key，警告会被抛到组件的上层调用位置，定位到你写PopOverBlockContent的那一行，这种情况去组件内部给遍历出的子节点补上合法key即可。

你观察到的“给第一个静态节点也套上条件包裹就不报警告”的现象，本质是当所有同级子节点都通过插值表达式返回时，React能正确识别每个插值块的边界，不会把单个插值返回的节点识别为无key列表项；静态节点和插值节点混写触发的警告是React早期版本的逻辑边界问题，不是业务写法逻辑错误。

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