NextJS动态导入问题

vawmfj5a 于 2023-06-22 发布在其他

关注(0)|答案(2)|浏览(128)

我在从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 import语句中，我收到一个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)

我不知道投诉是关于什么的，我真的很感激任何帮助！

next.js

来源：https://stackoverflow.com/questions/68289518/nextjs-dynamic-import-issue

2条答案

按热度按时间

w8ntj3qf1#

dynamic的类型如下：

export default function dynamic<P = {}>(dynamicOptions: DynamicOptions<P> | Loader<P>, options?: DynamicOptions<P>): React.ComponentType<P>;

其中P是导入组件的 prop
因此，动态期望得到Loader<P> = LoaderComponent<P> = Promise<React.ComponentType<P>
你只需要告诉他 prop 是什么。像这样：

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)
)

或制作导出的 prop ，然后：

import { Props as SpinnerProps } from 'components/ui/Spinner'

const Spinner = dynamic<SpinnerProps>(
  () => import('components/ui/Spinner').then(mod => mod.Spinner)
)

赞(0）回复(0）举报 2023-06-22

bt1cpqcv2#

@brc-dd是对的，只定义React.FC类型的组件即可，
export const Spinner: React.FC<Props> = ({inline}) => {}
虽然很小的解释为什么它会这样工作：
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;
    }

所以你必须有 prop 与children键。如果你不想把你的组件界面搞得一团糟，而且它实际上不接受子，那么你可以在组件Props界面中输入children?: never;。

赞(0）回复(0）举报 2023-06-22

我来回答

NextJS动态导入问题

2条答案

相关问题

热门标签

最新问答