next.js 从object动态导入组件

Question

我有一个 object 的组件，我希望使用next/dynmaic动态导入这些组件

我只是想知道是否有可能。

这是有问题的object

// IconComponents.tsx

import {
    Tick,
    Star
} from 'components/Icons';

export interface Map {
  [name: string]: JSX.Element;
}

const IconObject: Map = {
  tick: <Tick />,
  star: <Star />,
};

export default IconObject;

如果我将其导入不同的文件

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('./Icons/IconComponents'));

我收到以下错误

'() => Promise<typeof import("...path")>' 类型的参数不可分配给 'DynamicOptions<{}> | 类型的参数加载程序<{}>'。

类型 '() => Promise<typeof import("...path")>' 不可分配给类型 '() => LoaderComponent<{}>'。

我做错了什么吗，我需要 object 中的所有组件，所以我应该遍历它吗？ 有任何想法吗？

Answer 1

dynamic(callback)

看起来dynamic中提供的callback应该返回反应组件

尝试

const DynamicComponent = dynamic(() => import('./Icons/IconComponents').tick);