ReactJS Array 用 JSX 元素中的键填充

Question

我正在寻找生成多个 JSX 元素的最短方法。例如，如果我需要生成 10<span>我可以很容易地使用 Array map 函数

{[...Array(10)].map((x, i) =>
    <span key={i} ></span>
)}

上述方法没有任何问题，但我想要另一个较短的版本，例如，

Array(10).fill(<span></span>);

然而，React 会抱怨没有独特的“关键”道具。有没有人在不使用 random() 的情况下有一个干净的解决方案？

Answer 1

该Array(10).fill(<span></span>);解决方案的问题不仅仅是键：它对数组中的每个条目使用相同的跨度，这可能不是您想要的。

您可以使用Array#from：

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

它仍然使用回调，但无论如何你都需要它。与扩展和映射相比，它稍微不那么冗长，但效率更高（并不是说它在 99.999% 的情况下都很重要）。