React.lazy() 與 Typescript

Question

我收到錯誤：

類型“元素”中缺少屬性“默認”，但類型“{ default: ComponentType;”中需要屬性“default”。 }'.ts(2322)

   {React.lazy(() => import(`../../i18n/locales/${this.props.lang}`).then(o => (
              <CustomSelects
                options={o.option}
                formattedMessageId="createroom_genre"
                value={this.props.genre}
                handleValueChange={this.handleGenreChange}
              />
            ))) }

我閱讀了Using React.lazy with TypeScript但是，我不知道如何在我的情況下執行此操作。

如果您需要更多信息，請告訴我。 謝謝。

Answer 1

組件不應在使用它們的地方就地聲明，這可能會終止優化並可能導致無限循環。

React.lazy旨在與動態import一起使用，回調函數應該返回一個模塊的承諾，即{ default: Component }對象，但它目前返回一個 React 元素的承諾。

React.lazy不打算參數化，它不接受 props 並且this.props.lang不能在那里工作。 它應該用另一個組件包裹以接收道具：

const LocalCustomSelects = React.memo(({ lang }) => {
  const Lazy = React.lazy(async () => {
    const o = await import(`../../i18n/locales/${lang}`);
    return { default: props => <CustomSelects ... /> };
  });

  return <Lazy/>;
});