[英]Trouble defining types in NextJs with dynamic import - Typescript / NextJs
我构建了一个组件,在必要时使用 next/dynamic 导入 react-icons,但我找不到为该组件定义 typescript 类型的正确方法。 该组件本身有效。
这是带有 typescript 的 codesandbox 的链接: https://codesandbox.io/s/nextjs-dynamic-import-with-react-icons-zk1kz9
代码:
import dynamic from "next/dynamic";
const DynamicIcon = ({
iconFamily,
icon,
...rest
}: {
iconFamily: keyof typeof Icons;
icon: string;
}) => {
const Icons = {
ci: dynamic(() => import("react-icons/ci").then((mod) => mod[icon])),
fa: dynamic(() => import("react-icons/fa").then((mod) => mod[icon])),
io: dynamic(() => import("react-icons/io").then((mod) => mod[icon])),
io5: dynamic(() => import("react-icons/io5").then((mod) => mod[icon])),
md: dynamic(() => import("react-icons/md").then((mod) => mod[icon])),
ti: dynamic(() => import("react-icons/ti").then((mod) => mod[icon])),
go: dynamic(() => import("react-icons/go").then((mod) => mod[icon])),
fi: dynamic(() => import("react-icons/fi").then((mod) => mod[icon])),
gi: dynamic(() => import("react-icons/gi").then((mod) => mod[icon])),
wi: dynamic(() => import("react-icons/wi").then((mod) => mod[icon])),
di: dynamic(() => import("react-icons/di").then((mod) => mod[icon])),
ai: dynamic(() => import("react-icons/ai").then((mod) => mod[icon])),
bs: dynamic(() => import("react-icons/bs").then((mod) => mod[icon])),
ri: dynamic(() => import("react-icons/ri").then((mod) => mod[icon])),
fc: dynamic(() => import("react-icons/fc").then((mod) => mod[icon])),
gr: dynamic(() => import("react-icons/gr").then((mod) => mod[icon])),
hi: dynamic(() => import("react-icons/hi").then((mod) => mod[icon])),
hi2: dynamic(() => import("react-icons/hi2").then((mod) => mod[icon])),
si: dynamic(() => import("react-icons/si").then((mod) => mod[icon])),
sl: dynamic(() => import("react-icons/sl").then((mod) => mod[icon])),
im: dynamic(() => import("react-icons/im").then((mod) => mod[icon])),
bi: dynamic(() => import("react-icons/bi").then((mod) => mod[icon])),
cg: dynamic(() => import("react-icons/cg").then((mod) => mod[icon])),
vsc: dynamic(() => import("react-icons/vsc").then((mod) => mod[icon])),
tb: dynamic(() => import("react-icons/tb").then((mod) => mod[icon])),
tfi: dynamic(() => import("react-icons/tfi").then((mod) => mod[icon]))
};
const Icon = iconFamily && icon ? Icons[iconFamily] : null;
if (!Icon) return <></>;
return (
<>
<Icon {...rest} />
</>
);
};
export default DynamicIcon;
错误:
./components/DynamicIcon.tsx:12:17
Type error: Argument of type '() => Promise<typeof import("/sandbox/node_modules/react-icons/ci/index") | IconType | undefined>' is not assignable to parameter of type 'DynamicOptions<IconBaseProps> | Loader<IconBaseProps>'.
Type '() => Promise<typeof import("/sandbox/node_modules/react-icons/ci/index") | IconType | undefined>' is not assignable to type '() => LoaderComponent<IconBaseProps>'.
Type 'Promise<typeof import("/sandbox/node_modules/react-icons/ci/index") | IconType | undefined>' is not assignable to type 'LoaderComponent<IconBaseProps>'.
Type 'typeof import("/sandbox/node_modules/react-icons/ci/index") |IconType | undefined' is not assignable to type 'ComponentType<IconBaseProps> | { default: ComponentType<IconBaseProps>; }'.
Type 'undefined' is not assignable to type 'ComponentType<IconBaseProps> | { default: ComponentType<IconBaseProps>; }'.
我尝试了多种定义类型的方法(字符串、keyof typeof IconType 等)
我认为问题是你在这里返回Promise
。
ci: dynamic(async () => {
const mod=await import("react-icons/ci")
return mod[icon]
)
})
此外,您将icon
作为字符串传递,但此字符串值应该是react-library
导出的值。 也许你应该为icon
类型定义一个枚举
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.