javascript - 如何在 JSX 中重复一个元素？

Question

我想在 JSX 中重复一个图像元素，我需要的代码如下:

<View>
  <Image source={require('../images/image.png')} />
  <Image source={require('../images/image.png')} />
  <Image source={require('../images/image.png')} />
  <Image source={require('../images/image.png')} />
  <Image source={require('../images/image.png')} />
</View>

如何使用循环生成此代码？

Answer 1

简单!您可以即时创建数组。像这样:

<View>
  {[...Array(5)].map((x, i) => <Image key={i} source={require('../images/image.png')} />)}
</View>

[...Array(5)] 给出:[undefined, undefined, undefined, undefined, undefined]。这可能看起来没用，但实际上，这为我们提供了一些可以使用 map() 进行迭代的东西，我们可以使用它来返回我们想要的组件(我们不需要 x在这里)。

为了提高性能，您可以在渲染之外创建数组，以防止在每次重新渲染时重新创建临时数组。出于类似的原因，您也可以单独放置您的require。