React 中 key 属性位置与 JSX 展开运算符的解析机制详解-js教程-PHP中文网

React 中 key 属性位置与 JSX 展开运算符的解析机制详解

在 React 18.2 中，key 属性写在 JSX 元素上时，若与扩展运算符（{...{}}）顺序不同，可能导致意外的 key 丢失或失效，进而触发「Each child in a list should have a unique "key" prop」警告——根本原因在于 React 对 key 的特殊处理逻辑及 JSX 编译规则。

在 react 18.2 中，`key` 属性写在 jsx 元素上时，若与扩展运算符（`{...{}}`）顺序不同，可能导致意外的 key 丢失或失效，进而触发「each child in a list should have a unique "key" prop」警告——根本原因在于 react 对 `key` 的特殊处理逻辑及 jsx 编译规则。

React 的 key 并非普通 props：它是一个保留属性（reserved prop），由 React 运行时专门识别和提取，必须直接出现在 JSX 标签名后、属性列表最前方（或至少不能被 spread 操作覆盖）。当使用 {...{}} 扩展空对象时，JSX 编译器（如 Babel）会将其转换为 Object.assign({}, {}, props) 形式；而 React 在创建元素时，会优先从显式声明的 props 中读取 key，若 key 出现在 spread 表达式之后，则可能被后续同名属性覆盖（尽管空对象不包含 key），但更关键的是：Babel 的 JSX 转换规则规定 —— key 必须是 JSX 标签的「静态属性」，不能是 spread 的一部分，否则会被忽略。

验证这一点的最简示例：

// ❌ 错误：key 被 spread 遮蔽（即使 spread 是空对象）
<div key="formKey">
  <input><button>Test</button>
</div>
// 编译后等价于 React.createElement('div', { key: 'formKey', ...{} }, ...)，
// 但实际 Babel 处理中，spread 会合并到 props 对象，而 key 若未作为独立 prop 显式前置，可能无法被正确注入。

// ✅ 正确：key 显式置于 spread 前，确保被 React 优先捕获
<div key="formKey">
  <input><button>Test</button>
</div>
// 编译后 React.createElement 自动将 key 提取为独立参数：React.createElement('div', { key: 'formKey' }, ...)

⚠️ 注意事项：

Json Repair Kit

使用 Node.js 评估修复格式错误的 JSON，自动纠正尾随逗号、单引号、未加引号的键等常见问题，实现文件规范化。

下载

key 永远不能通过 props={{ key: 'xxx' }} 或 {...{ key: 'xxx' }} 动态传入 —— 它必须是 JSX 标签的直接属性；
当组件被用于 map() 列表渲染时，key 必须唯一且稳定（如 item.id），而非硬编码常量（如 "formKey"），否则 React 无法区分兄弟节点，仍会报错；
单个元素（无兄弟同级节点）通常不触发该警告，因为 warning 仅在 React.Children.toArray() 或 React.createElement 处理子元素数组时校验 key —— 但若该 div 本身是某个 map 的返回项，且 key 未正确绑定，则必然触发。