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

Posted 2023-02-21

【中文标题】如何在 JSX 中重复一个元素？

【英文标题】：How to repeat one element in JSX?

【发布时间】：2019-03-20 07:06:34

【问题描述】：

我想在 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>

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

【参考方案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 分开放置。

【讨论】：

另外请记得提供密钥。

您要添加密钥吗？

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

@EmileBergeron，不，不应该。它只会在您根本不提供时发出警告。您是指一些 lint-rule 吗？

【参考方案2】：

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

【参考方案3】：

您可以创建一个循环并返回相关元素的函数。

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

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

renderImages()

【参考方案4】：

试试这个：

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

</View>

【参考方案5】：

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

例子：

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

然后在您的最终 JSX 中，您只需打印出 myjsx

<View>
    myjsx
</View>

【参考方案6】：

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

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

您可以从那里添加一个循环或执行其他重构。