React组件传递的Props未在渲染的HTML中显示问题

核心原因 #

React里的key是React内部用来识别列表元素的特殊属性，它不会被渲染到最终的HTML DOM节点上，所以你在浏览器开发者工具里看不到这个属性，这是正常行为，并非报错。

你传递的key2作为prop是能被组件正常接收的（可通过console.log(props.key2)验证），但将其赋值给div的key属性后，React不会把这个key输出到真实DOM中。

解决方案 #

如果需要在DOM节点上显示唯一标识，不要使用key，改用自定义数据属性（比如data-key）：

修改Card组件代码：

import "./Card.css";
function Card(props) {
  const classes = "card " + props.className;
  console.log("key:" + props.key2)
  return (
    <div data-key={props.key2} className={classes}>
      {props.children}
    </div>
  );
}

export default Card;

修改后渲染出的DOM会变为：

<div class="card card" data-key="6bbf4919-3e38-40f0-8687-910feffcf3f6"></div>

补充说明 #

• key仅用于帮助React高效更新列表元素，仅在React内部生效，不会暴露给真实DOM。
• 若只是需要给组件传递唯一标识供内部逻辑使用，key2可以正常使用，无需修改，只是不要通过DOM的key属性来期望在页面上看到它。

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