Блог

`Вот моя попытка динамически загрузить компонент одним нажатием кнопки и отобразить на странице. https://codesandbox.io/s/sweet-haze-knste?file=/src/App.tsx

Я использую приведенную ниже строку кода для динамического импорта компонента при нажатии кнопки.

const importedComponent = React.lazy(() => import("./DynamicallyImportedComponent"));

И состояние задается с помощью

 this.setState({
      importModule: importedComponent
      // importModule: CommonEditorCallout
    });
  

Однако это не отображает правильно.

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

import DynamicallyImportedComponent from "./DynamicallyImportedComponent";

Возможно, это связано с тем, что при обычном импорте я указываю имя импортируемого компонента или что-то связано с самим динамическим импортом?

Документы

Затем отложенный компонент должен быть отрисован внутри компонента ожидания, что позволяет нам отображать некоторый резервный контент (например, индикатор загрузки), пока мы ждем загрузки отложенного компонента.

Таким образом, обертывание вашего лениво загруженного компонента с помощью React.Suspense fallback реквизита исправит ошибку.

  <React.Suspense fallback={<div>Loading...</div>}>
   {this.state.showImportedModule amp;amp; <div>{<ComponentToShow />}</div>}
 </React.Suspense>
  

Смотрите пример