如何在 React JSx 中多次重复一个图像以填满一个页面？

Question

我正在玩 React，我有兴趣创建一个交互式背景，在该背景中重复这个 ONE 图像（它们会旋转，但我想出了如何旋转它）。我很确定我也无法使用 for 循环，如果它是背景图像，不知道如何实现。我想我最终会使用 z-index 对其进行分层。到目前为止，我只需要帮助重复它而不使用 .map() 这就是我所拥有的（显然，它不适用于 for 循环）：

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

我没有得到什么？不应该有一种方法可以使用 map 而不必一次又一次地手动将图像复制到数组中。我觉得这违背了目的。

Answer 1

你应该使用 css。

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 循环用于其他目的，我建议您这样做： 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>
  );
}