reactjs - React.lazy() 与 typescript

Question

我得到了错误:

Property 'default' is missing in type 'Element' but required in type '{ default: ComponentType; }'.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 一起使用，回调函数应该返回模块的 promise ，即 { default: Component } 对象，但它当前返回 React 元素的 promise 。

React.lazy 不打算被参数化，它不接受 props 并且 this.props.lang 不能在那里工作。它应该用另一个组件包装以接收 Prop :

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

  return <Lazy/>;
});