如何在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出于类似的原因单独放置.