Шаблон React.lazy с использованием загружаемых компонентов - PullRequest
Новая
       92

Шаблон React.lazy с использованием загружаемых компонентов

0 голосов
/ 19 июня 2020

У меня есть следующий сценарий, когда я не знаю заранее, какой компонент загружать. Решение с использованием React.lazy: 

import React, { lazy, Suspense } from "react";

export default class CallingLazyComponents extends React.Component {
  render() {

    var ComponentToLazyLoad = null;

    if(this.props.name == "A") { 
      ComponentToLazyLoad = lazy(() => import("./AComponent"));
    } else if(this.props.name == "B") {
      ComponentToLazyLoad = lazy(() => import("./BComponent"));
    }
    return (
        <div>
            <h1>This is the Base User: {this.state.name}</h1>
            <Suspense fallback={<div>Loading...</div>}>
                <ComponentToLazyLoad />
            </Suspense>
        </div>
    )
  }
}

Как я могу добиться того же, используя Загружаемые компоненты

1 Ответ

1 голос
/ 19 июня 2020

Я считаю, что лучшее решение вашей проблемы - продолжать использовать React.lazy как есть рекомендовано автором loadable-components , поскольку «он больше не поддерживается и несовместим с Webpack v4 +. и Babel v7 + "

...