ReactJS：生成带唯一key的多JSX元素的极简方案

嘿，我懂你想要更清爽写法的心情！之前用Array(10).fill(<span></span>)踩坑的原因有俩：一是所有元素都是同一个JSX实例（后续更新容易出问题），二是确实缺了React要求的唯一key。下面给你几个不用random、又足够简洁的解决方案：

1. 用Array.from直接生成（最简洁的 inline 写法） #

Array.from支持第二个参数作为映射函数，比展开数组再map少一层嵌套，写法更紧凑：

{Array.from({ length: 10 }, (_, i) => <span key={i}></span>)}

这里用索引i当key完全合法——只要你的列表元素不会重新排序、新增/删除位置（这也是React官方允许用索引当key的场景），完全不用担心问题。

2. 封装复用小工具函数（多次使用更省心） #

如果需要重复生成不同的重复元素，写个小函数复用会更爽：

const repeatJSX = (element, count) => 
  Array.from({ length: count }, (_, idx) => 
    React.cloneElement(element, { key: idx })
  )

用的时候直接传元素和数量就行，超级简洁：

{repeatJSX(<span></span>, 10)}
{repeatJSX(<div className="item"></div>, 5)}

React.cloneElement会帮你基于传入的元素创建新实例，并加上唯一的key，完美避开了fill带来的“同一实例重复渲染”问题。

为啥fill不能用？ #

补充一句：Array(10).fill(<span></span>)会把同一个对象填充到数组的每一项，React不仅会报key警告，而且当你后续想更新这些元素时，因为都是同一个引用，React无法正确区分它们的状态，很容易出奇怪的bug，所以这种写法一定要避开哦～

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