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

Question

这段代码没有错误：

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

const DetailedView = () => {

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

export default DetailedView;

但是，当我使用 next dynamic 时，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. <DatasheetContainer<Subject>

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

Answer 1

我是这样解决的

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

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

How to pass Generic Type to component imported with Next.js Dynamic?

lazy-loading

typescript

reactjs

typescript-generics

next.js