Как мне повторить одно изображение несколько раз, чтобы заполнить страницу в React JSx? - PullRequest
Новая
       112

Как мне повторить одно изображение несколько раз, чтобы заполнить страницу в React JSx?

0 голосов
/ 09 июля 2020

Я играю в React, и мне было интересно создать интерактивный фон, на котором повторяется ОДНО изображение (и они вращаются, но я понял, как его вращать). Я почти уверен, что у меня нет возможности использовать a для l oop, не знаю, как это сделать, если это фоновое изображение. Я решил, что просто использую z-index, чтобы наслоить его в конце. Пока мне просто нужна помощь, чтобы повторить это без использования .map () Это то, что у меня есть (очевидно, он не работает с for l oop): 

return (
        <div>
            {
                for (var i = 0; i < 100; i++) {
                    return (
                        <img
                            key={i}
                            src={circle}
                            alt="circle"
                            className="rotate"
                        />
                    );
                }
            }
        </div>
    );

Что я не получаю? Не должно быть способа использовать карту без необходимости снова и снова вручную копировать изображение в массив. Я чувствую, что это противоречит цели.

1 Ответ

1 голос
/ 09 июля 2020

Для этого следует использовать css. Свойство 1001 *

background-repeat должно быть хорошим решением вашей проблемы.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

Кроме того, в JSX-коде невозможно иметь циклы for. Ознакомьтесь с этим уроком, чтобы лучше понять, что там можно разместить: https://egghead.io/lessons/react-understand-and-use-interpolation-in-jsx

Если вам нужно использовать for l oop для других целей, вот как я предложил бы сделать это: https://codesandbox.io/s/beautiful-hermann-uoro8?file= / src / App. js

function ElementsList() {
  const elements = [];

  for (let i = 0; i < 5; i++) {
    elements.push(<div key={i}>el {i}</div>);
  }

  return elements;
}

export default function App() {
  return (
    <div className="App">
      <h1>Generate componets using `for` loop</h1>
      <ElementsList />
    </div>
  );
}
...