react 数组ComponentLoader

如果你想要加载一个包含多个组件的数组，你可以使用 React 中的 `ComponentLoader`。以下是一个使用 TypeScript 的示例：

import React, { ComponentType, Suspense } from 'react';

type ComponentLoaderProps = {
  components: Array<() => Promise<{ default: ComponentType<any> }>>;
};

const ComponentLoader: React.FC<ComponentLoaderProps> = ({ components }) => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      {components.map((loadComponent, index) => {
        const Component = React.lazy(loadComponent);
        return <Component key={index} />;
      })}
    </Suspense>
  );
};

在上面的示例中，我们定义了一个名为 `ComponentLoader` 的函数组件，它接受一个包含异步加载组件函数的数组 `components`。我们使用 `React.lazy` 和 `Suspense` 来异步加载每个组件，并在加载过程中显示一个加载中的提示。

你可以通过将需要加载的组件函数作为 `components` 数组的元素来使用 `ComponentLoader` 组件。例如：

const components = [
  () => import('./components/Component1'),
  () => import('./components/Component2'),
  () => import('./components/Component3'),
];

const App: React.FC = () => {
  return (
    <div>
      <h1>My App</h1>
      <ComponentLoader components={components} />
    </div>
  );
};

在上面的示例中，我们定义了一个 `components` 数组，其中包含三个异步加载组件的函数。然后，我们将 `components` 数组传递给 `ComponentLoader` 组件。

当 `ComponentLoader` 渲染时，它将遍历 `components` 数组并动态加载每个组件。你可以根据自己的需求在 `ComponentLoader` 组件中进行修改和扩展。

希望对你有所帮助！如果你有任何进一步的问题，请随时问我。