如何循环 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>