如何将通用类型传递给使用 Next.js Dynamic 导入的组件？答案

【问题标题】：How to pass Generic Type to component imported with Next.js Dynamic?如何将通用类型传递给使用 Next.js Dynamic 导入的组件？
【发布时间】：2022-01-10 02:07:53
【问题描述】：

这段代码没有错误：

import DatasheetContainer from '@/uikit/detailed-view/DatasheetContainer';

const DetailedView = () => {

  return (
    <Page>
      <PageBody direction="row" bgColor="white">
        <DatasheetContainer<Subject>
        />
      </PageBody>
    </Page>
  );
};

export default DetailedView;

但是，当我使用下一个动态时，ts 会报错

const DatasheetContainer = dynamic(
  () => import('@/uikit/detailed-view/DatasheetContainer'),
);

const DetailedView = () => {

  return (
    <Page>
      <PageBody direction="row" bgColor="white">
        <DatasheetContainer<Subject>
        />
      </PageBody>
    </Page>
  );
};

export default DetailedView;

错误是Expected 0 type arguments, but got 1. on <DatasheetContainer<Subject>

下一个动态如何正确传递类型？

【问题讨论】：

试试这个。 const DatasheetContainer = dynamic<Subject>( () => import('@/uikit/detailed-view/DatasheetContainer'), );。我认为您可以通过沙箱分享它以获得正确的答案。

标签： reactjs typescript next.js lazy-loading typescript-generics

【解决方案1】：

我是这样解决的

const DatasheetContainer = dynamic(
  () => import('@/uikit/detailed-view/DatasheetContainer'),
) as <DataType extends Record<string, unknown>>({ prop1, prop2 }: DatasheetContainerProps<DataType>) => JSX.Element

【讨论】：