离子 - 反应如何重复组件

Question

我想在 ionic 中使用 react 重复我的组件 n 次，但我不知道该怎么做

例如在我的Component.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;

在我的App.tsx中，我有：

import { IonApp} from '@ionic/react';
import '@ionic/react/css/core.css';
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';
import './theme/variables.css';

import Component from './Component';


const App: React.FC = () => (
  <IonApp className="ion">
    <div>
       {
        // I want to repeat this
      <Component />
       }
    </div>
  </IonApp>
);

export default App;

我是 typescript 的新手并做出反应，如果你能提供帮助，我会很高兴

谢谢

Answer 1

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

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

不要忘记重复的组件在循环中需要有一个唯一的key prop。

请注意.fill(null) 。 当您使用Array function 创建数组时，它会被empty值填充，并且在其上运行.map方法将失败。 我们必须用一个值填充它（在本例中为null ）以使其可迭代。