我正在寻找生成多个 JSX 元素的最短方法。
例如，如果我需要生成 10 个<span>，我可以轻松使用 Array map 函数
{[...Array(10)].map((x, i) =>
<span key={i} ></span>
)}
上述方法没有问题，但我想要另一个更短的版本，例如，
Array(10).fill(<span></span>);
但是，React 会大喊没有独特的“关键”道具。有没有人在不使用 random() 的情况下有一个干净的解决方案？
【问题讨论】：
标签： javascript reactjs ecmascript-6 jsx
Array(10).fill(<span></span>); 解决方案的问题不仅仅是键：它为数组中的每个条目使用 same 跨度，这可能不是您想要的。
你可以使用Array#from:
Array.from({length:10}, (_, i) => <span key={i}></span>);
// or
Array.from(Array(10), (_, i) => <span key={i}></span>);
它仍然使用回调，但无论如何你都需要它。与扩展和映射相比，它稍微不那么冗长，效率更高（在 99.999% 的情况下并不重要）。
【讨论】：
[...Array(10)].map((x, i) => <span key={i} ></span> ) :P 之间没有太大区别，因为 op 试图跳过循环
Array#fill 表面上的简单是虚幻的，需要回调。
key，因为它只是为了 CSS 动画目的。但想知道这个愚蠢的工作是否有任何更短的版本。