如何在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>

我该如何使用循环来生成这段代码？

- Masoud92m

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分开放置。

- Chris

---

请记得提供密钥。 - Piotr Jaworski

你想要添加一个键吗？ - Steve Bohmbach

使用索引作为键会触发警告，但在这种情况下，这不是问题。 - Emile Bergeron

@EmileBergeron，不应该。它只会在您根本没有提供时发出警告。您是指某些lint规则吗？ - Chris

Answer 2

你可以在返回jsx之前将其存储在变量中。

示例：

const myjsx = [];
for(let i = 0; i < 4; i++) {
   myjsx.push(<Image source={require('../images/image.png')} />);
}

在最终的JSX中，您只需打印出{myjsx}即可。

<View>
    {myjsx}
</View>

- Lukasz

Answer 3

试试这个：

const totalImages = 10;
<View>
{ 
   (new Array(totalImages)).fill(<Image source={require('../images/image.png')}/>)
}
</View>

- jpacareu

Answer 4

<View>
    {() => {
        const
            longArray = new Array(7),
            image = require('../images/image.png');
        return longArray.map((k, i) => <Image key={k} source={image} />);
    }}
</View>

- Matthi

Answer 5

你可以创建一个循环函数，返回所需的元素。

renderImages() {
    var images = [];
    for (var i = 0; i < numrows; i++) {
        images.push(<Image source={require('../images/image.png')} />);
    }
    return images;
}

在渲染方法中，您只需调用函数名称，如下所示：

{renderImages()}

- Josh Bowden

Answer 6

你可以创建一个简短的函数来为你执行这个操作

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

你可以添加一个循环或进行其他的重构。

- Paul Nikonowicz