[英]NextJS dynamic import issue
从NextJS
dynamic
导入时,我遇到了一个非常奇怪的问题。
我正在导入这样的组件:
const Spinner = dynamic(() => import('components/ui/Spinner').then(mod => mod.Spinner))
Spinner.tsx
是
import {useEffect, useState} from 'react'
import PulseLoader from 'react-spinners/PulseLoader'
import {FadeHOC} from '.'
import theme from 'utils/theme'
interface Props {
inline?: boolean
}
const TIMEOUT = 1000
export const Spinner = ({inline}: Props) => {
const [show, setShow] = useState(false)
useEffect(() => {
const timeout = setTimeout(
() => setShow(true),
TIMEOUT
)
return () => clearTimeout(timeout)
}, [])
return (
show
? <FadeHOC>
<PulseLoader size={10} margin={3} color={theme.color} css={inline ? 'margin-left: 14px;' : 'display: block; text-align: center; margin: 100px auto;'} />
</FadeHOC>
: null
)
}
在dynamic
导入语句中,我收到了TypeScript
投诉:
Argument of type '() => Promise<(({ inline }: Props) => JSX.Element) | ComponentClass<never, any> | FunctionComponent<never> | { default: ComponentType<never>; }>' is not assignable to parameter of type 'DynamicOptions<{}> | Loader<{}>'.
Type '() => Promise<(({ inline }: Props) => JSX.Element) | ComponentClass<never, any> | FunctionComponent<never> | { default: ComponentType<never>; }>' is not assignable to type '() => LoaderComponent<{}>'.
Type 'Promise<(({ inline }: Props) => Element) | ComponentClass<never, any> | FunctionComponent<never> | { default: ComponentType<never>; }>' is not assignable to type 'LoaderComponent<{}>'.
Type '(({ inline }: Props) => Element) | ComponentClass<never, any> | FunctionComponent<never> | { default: ComponentType<never>; }' is not assignable to type 'ComponentType<{}> | { default: ComponentType<{}>; }'.
Type '({ inline }: Props) => JSX.Element' is not assignable to type 'ComponentType<{}> | { default: ComponentType<{}>; }'.
Type '({ inline }: Props) => JSX.Element' is not assignable to type 'FunctionComponent<{}>'.
Types of parameters '__0' and 'props' are incompatible.
Type '{ children?: ReactNode; }' has no properties in common with type 'Props'.ts(2345)
我不知道投诉的内容是什么,非常感谢任何帮助!
dynamic
类型如下:
export default function dynamic<P = {}>(dynamicOptions: DynamicOptions<P> | Loader<P>, options?: DynamicOptions<P>): React.ComponentType<P>;
其中 P 是导入组件的道具
因此,动态期望得到Loader<P>
= LoaderComponent<P>
= Promise<React.ComponentType<P>
你只需要告诉他道具是什么。 像这样:
const Spinner = dynamic<{ inline?: boolean }>(
() => import('components/ui/Spinner').then(mod => mod.Spinner)
)
或者
import { Spinner as StaticSpinner } from 'components/ui/Spinner'
const Spinner = dynamic<React.ComponentProps<typeof StaticSpinner>>(
() => import('components/ui/Spinner').then(mod => mod.Spinner)
)
或将 Props 导出,然后:
import { Props as SpinnerProps } from 'components/ui/Spinner'
const Spinner = dynamic<SpinnerProps>(
() => import('components/ui/Spinner').then(mod => mod.Spinner)
)
@brc-dd 是对的,虽然很少解释为什么它会这样工作:
dynamic
类型如下:
export default function dynamic<P = {}>(dynamicOptions: DynamicOptions<P> | Loader<P>, options?: DynamicOptions<P>): React.ComponentType<P>;
所以它希望你返回React.ComponentType<P>
这意味着:
type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
FunctionComponent
是:
interface FunctionComponent<P = {}> {
(props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
propTypes?: WeakValidationMap<P>;
contextTypes?: ValidationMap<any>;
defaultProps?: Partial<P>;
displayName?: string;
}
所以你必须有children
钥匙的道具。 如果你不想弄乱你的组件界面并且它实际上不接受孩子那么你可以输入children?: never;
在组件 Props 接口中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.