如何延迟加载“从 {Library} 导入 {SelectedComponent}”？

Question

我将 React 18 与 Vite 和 Ionic 一起使用，我正在尝试延迟加载 IonDatetime 组件：

import { IonDatetime } from '@ionic/react';
const ControllerDatetime: React.FC<ControllerDatetimeProps> = ({
  control,
  label,
  name,
  clearErrors,
  disabled,
}: ControllerDatetimeProps) => {
  return (
    <Controller
      control={control}
      name={name}
      rules={{ required: true }}
      render={({
        field: { onChange, onBlur, value },
        fieldState: { invalid, isTouched },
      }) => (
        <IonDatetime>
          {label}
        </IonDatetime>
      )}
    />
  );
}

虽然我不知道如何在这里使用延迟加载。

我试过了

const IonDatetime = React.lazy(() => import { IonDatetime } from '@ionic/react')

但这会导致语法错误。

我正在使用延迟加载成功获取我自己的组件的默认导出，但是我如何从第三方库中延迟加载特定组件？

Answer 1

使用

import()

函数代替导入声明

const { IonDatetime } = React.lazy(() => import("@ionic/react"))

文件