next.js 从对象动态导入组件

Question

我有一个组件对象，我希望使用 next/dynmaic 动态导入它

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

这是有问题的对象

// 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' 类型的参数不可分配给 'DynamicOptions 类型的参数 |加载器'。

类型 '() => Promise' 不可分配给类型 '() => LoaderComponent'。

我做错了什么，我需要对象中的所有组件，所以我应该循环遍历它吗？有什么想法吗？

Answer 1

dynamic(callback)

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

试试

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