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>
  );
}

如何在React JSx中多次重复一张图像来填充页面？

1 个答案: