reactjs - React.lazy() med Typescript

Jag fick felet:

Egenskapen 'default' saknas i typen 'Element' men krävs i typen '{ 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}
              />
            ))) }

Jag läste om att använda React.lazy med TypeScript men jag vet inte hur jag ska göra detta i mitt fall.

Låt mig veta om du behöver mer information. Tack.

Svar #1

Komponenter bör inte deklareras på plats där de används, detta kan döda optimeringar och potentiellt resultera i en oändlig loop.

React.lazy är avsedd att användas med dynamisk import, callback-funktionen ska returnera ett löfte om en modul, dvs. ett { default: Component }-objekt, men den returnerar för närvarande ett löfte om ett React-element.

React.lazy var inte avsedd att parametriseras, den accepterar inte props och this.props.lang kan inte fungera där. Den bör omslutas med en annan komponent för att ta emot props:

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

  return <Lazy/>;
});

Relaterade artiklar