Javascript 离子反应如何重复成分

我想用react in ionic重复我的成分n次，但我不知道怎么做

例如，在我的

组件.tsx中，我有：

import React from 'react';
import { IonCard, IonCardContent} from '@ionic/react';

const Component: React.FC = () => {
    return(
        <div>
            <IonCard>
                <IonCardContent>Hello From Ion Card</IonCardContent>
            </IonCard>
        </div>
    )
};

export default Component;

我不熟悉打字和反应，如果你能帮助我，我会非常高兴

谢谢
您需要一个循环。这里最好的循环是
map
：

const App: React.FC = () => (
  <IonApp className="ion">
    <div>
       {
         Array(5).fill(null).map((_, i) => (
           <Component key={i} />
         ))
       }
    </div>
  </IonApp>
);

const-App:React.FC=（）=>(
{
数组（5）.fill（null）.map（（\ux，i）=>(
))
}
);

不要忘记重复的组件需要在循环中有一个唯一的
键
道具

请注意
。填充（空）
。当您使用
array
函数创建数组时，它将被
空值填充，并且对其运行
.map
方法将失败。我们必须用一个值（在本例中为
null
）来填充它，以使其可执行。
给定一个状态/重复次数，比如4，您可以执行
{Array（4）.map（=>）}
const App: React.FC = () => (
  <IonApp className="ion">
    <div>
       {
         Array(5).fill(null).map((_, i) => (
           <Component key={i} />
         ))
       }
    </div>
  </IonApp>
);