reactjs - React.lazy() med Typescript

Jeg fikk feilen:

Egenskapen 'default' mangler i typen 'Element', men er påkrevd 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}
              />
            ))) }

Jeg leste om å bruke React.lazy med TypeScript, men jeg vet ikke hvordan jeg skal gjøre dette i mitt tilfelle.

Gi meg beskjed hvis du trenger mer informasjon. Takk.

Svar #1

Komponenter bør ikke deklareres på stedet der de brukes, dette kan ødelegge optimaliseringer og potensielt resultere i en uendelig løkke.

React.lazy er ment å brukes med dynamisk import, callback-funksjonen skal returnere et løfte om en modul, dvs. et { default: Component } objekt, men den returnerer for øyeblikket et løfte om et React-element.

React.lazy var ikke ment å bli parameterisert, det aksepterer ikke props, og this.props.lang kan ikke brukes der. Det bør pakkes inn med en annen komponent for å motta props:

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

  return <Lazy/>;
});

Relaterte artikler