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

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>

Answer 3

您可以創建一個簡短的函數來為您執行此操作

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

您可以從那里添加循環或執行其他重構。

Answer 4

嘗試這個：

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

Answer 5

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

Answer 6

您可以創建一個循環並返回相關元素的函數。

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

在render方法中，您只需調用函數名稱：

{renderImages()}