React 中列表渲染时正确设置 key 属性的完整指南

在 react 中使用 map 渲染元素列表时，必须为每个直接子组件（而非其内部元素）提供唯一且稳定的 key 属性；否则将触发「each child in a list should have a unique “key” prop」警告。本文详解 key 的作用位置、常见错误及最佳实践。

你在 Stylewords 组件中遇到的警告，根本原因在于：key 必须放在由 map 直接返回的最外层 react 元素上，而不能放在其内部嵌套元素中。

你最初的代码中，… //> 使用了 >（即 React.Fragment）作为返回值，但 Fragment 是无 dom 节点的占位符，它本身不可接收 key 属性（除非显式写成 ）。而你把 key={word} 错误地加在了 上——这无法满足 React 对列表项 key 的要求，因为 map 返回的是 Fragment，React 实际看到的是多个 Fragment 作为兄弟节点，却未被赋予 key。

✅ 正确做法是：将 key 设置在 map 每次迭代返回的顶层组件上。若需包裹多个元素（如 //），应使用带 key 的显式 ：

function StyleWords({ words, ...props }) {   return words.map((word, index) => {     if (index < words.length - 1) {       return (                    {word} //                 );     } else {       return {word};     }   }); }

⚠️ 注意事项：

• 不要用 word 作 key（如 key={word}），除非你能 100% 确保数组中无重复字符串（例如 [‘hello’, ‘hello’] 会导致 key 冲突，引发渲染异常或状态错乱）；
• 推荐使用 index 作为 key 的场景仅限于列表项是静态、永不重排、永不增删——本例中单词顺序固定且无交互，index 是安全且简洁的选择；
• 若列表可能动态变化（如支持增删、拖拽排序），请改用每项唯一 ID（如 wordId 或 crypto.randomUUID() 生成的标识）；
• 避免在 Fragment 中混用文本与 jsX（如 // 是纯文本），建议统一用 包裹分隔符以保证结构可控：

// 更健壮的写法（避免文本节点干扰） return (        {word}     {index < words.length - 1 &&  // }    );

? 总结：Key 不是“给 span 加个属性”，而是告诉 React “这个列表项整体的身份标识”。始终把它放在 map 回调函数的直接返回值上，并确保其唯一性与稳定性——这是避免警告和潜在 bug 的关键。