如何循环 React Elements 特定次数？

Question

我正在尝试制作一个循环器组件，以便我可以在特定时间内循环它的任何子组件。 我该怎么做？

// Looper

function Looper({ children, array }) {
    return (
      <div>
        {array.map((item) => (
          <div key={item}>{children}</div>
        ))}
      </div>
    );
  }
  

// It works, but it needs a dummy array that I don't want.

<Looper array={[1, 2, 3, 4, 5]}>
    <span>Hello Guys..</span>
</Looper>

Answer 1

您可以使用 [...Array(times).keys()] 即时创建递增数字数组，如下所示：

// Looper

function Looper({ children, times }) {
    const keys = [...Array(times).keys()];
    return (
      <div>
        {keys.map((item) => (
          <div key={item}>{children}</div>
        ))}
      </div>
    );
  }
  
<Looper times={5}>
    <span>Hello Guys..</span>
</Looper>

Answer 2

用 for 循环替换您的 map 函数并传递一个计数 i:e 您希望循环程序呈现的次数，并使用该索引作为子 div 的键，然后将它们推入数组。最后，return 子 div 数组。如果您想使用这种方法，请查看此 link Loop inside React JSX