如何为数组内的React组件添加prop（如key）属性？

可以在数组创建完成后统一添加key，你需要用到React提供的React.cloneElement API，它可以基于已有React元素生成新元素，支持新增/覆盖props，不会修改原元素。

核心代码示例 #

import React from 'react';

const elements = [<Component someProp={someValue}/>, <Component someProp={someValue}/>];

// 推荐用map生成带key的新数组，比forEach更简洁不需要额外声明空数组接收结果
const elementsWithKey = elements.map((item, index) => {
  // 第二个参数传入要新增的props，原有props会完整保留
  return React.cloneElement(item, { key: index });
});

注意：如果你的组件对应的数据有唯一业务标识（比如id、uuid等），优先用该值作为key，不要直接用索引index，避免列表顺序变更时出现渲染异常。

forEach版本实现（不推荐） #

const elementsWithKey = [];
elements.forEach((item, index) => {
  elementsWithKey.push(React.cloneElement(item, { key: index }));
});

补充说明 #

React元素是不可变对象，你无法直接修改已经创建完成的元素的props属性，必须通过React.cloneElement生成新对象的方式来实现新增key的需求，这个方案完全不影响你原有数组定义的可读性，符合你的需求。

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