React.lazy () с Typescript

Question

Я получил ошибку:

Свойство 'default' отсутствует в типе 'Element', но требуется в типе '{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}
              />
            ))) }

Я прочитал Используя React.lazy с TypeScript , но я не знаю, как это сделать в моем случае.

Дайте мне знать, если вам нужна дополнительная информация.Спасибо.

Answer 1

Компоненты не должны быть объявлены на месте, где они используются, это может убить оптимизацию и потенциально привести к бесконечному циклу.

React.lazy предназначен для использования с динамическим import, функция обратного вызова должна возвращать обещание модуля, то есть { default: Component } объекта, но в настоящее время возвращает обещание элемента React.

React.lazy не предназначен для параметризации, он не принимает реквизиты и 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/>;
});