Как повторить один элемент в 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

Вы можете создать функцию, которая зацикливает и возвращает рассматриваемые элементы.

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

В методе рендеринга вы просто вызываете имя функции как таковое:

{renderImages()}

Answer 2

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

Answer 3

Попробуйте это:

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

Answer 4

Вы можете сохранить его в переменной перед возвратом jsx.

Пример:

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

, затем в вашем окончательном JSX вы просто распечатаете {myjsx}

<View>
    {myjsx}
</View>

Answer 5

Легко!Вы можете создать массив на лету.Вот так:

<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 6

Вы можете создать короткую функцию, чтобы сделать это для вас

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

Вы можете добавить цикл или выполнить дополнительный рефакторинг оттуда.