React中onClick事件传key参数失效，传id参数正常的问题求助

为什么this.props.key无法生效？ #

React中的key是特殊内置属性，它仅用于帮助React识别列表元素的变化（实现高效的列表渲染），不会被作为常规props传递给组件内部。所以你在组件里通过this.props.key根本取不到实际值，自然无法触发预期逻辑。

解决办法 #

有两种简单可行的处理方式：

• 方式一：给组件额外传递一个非特殊命名的props，比如将key的值同步传给itemKey：

  // 父组件传递props时
  <YourComponent key={targetKey} itemKey={targetKey} id={targetId} onDelete={onDelete} />
  
  // 子组件内调用时
  onClick={() => this.props.onDelete(this.props.itemKey)}
  

• 方式二：既然id和key的值完全一致，直接使用已经能正常获取的this.props.id即可，无需额外处理。

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