Как загрузить несколько компонентов одновременно в reactJs? - PullRequest
Новая
       65

Как загрузить несколько компонентов одновременно в reactJs?

0 голосов
/ 21 марта 2020

Здесь у меня есть 4 компонента, где я рендеринг всех этих четырех компонентов в приложении. js. Эти четыре компонента индивидуально работают с разными API. Таким образом, один компонент может отображаться быстрее, а другие - медленнее. Здесь я пытаюсь добиться того, чтобы мне показывали индикатор загрузки, пока все компоненты не будут отрисованы. Я попробовал это, используя React Lazy loading и Suspense, но безуспешно. Пожалуйста, помогите мне с этим. Здесь я делюсь кодом того, что я сделал. Заранее спасибо.

код: 

import React, { Suspense, lazy } from "react";
import Navbar from "../layout/Navbar";
import Loader from "../layout/Preloader";

const Bar = lazy(() => import("./bar"));
const VariablePie = lazy(() => import("./variablePie"));
const Pie = lazy(() => import("./pie"));
const CombineChart = lazy(() => import("./combineChart"));

const Dashboard = () => (
  <div>
    <Navbar />
    <Suspense fallback={<Loader/>}>
      <main>
        <div className="row" style={{ backgroundColor: "#eee" }}>
          <div className="col s12 m6 l6" style={{ margin: "10px 0px" }}>
            <Bar />
          </div>
          <div className="col s12 m6 l6" style={{ margin: "10px 0px" }}>
            <VariablePie />
          </div>
          <div className="col s12 m6 l6" style={{ margin: "10px 0px" }}>
            <Pie />
          </div>
          <div className="col s12 m6 l6" style={{ margin: "10px 0px" }}>
            <CombineChart />
          </div>
        </div>
      </main>
    </Suspense>
  </div>
);

export default Dashboard;

1 Ответ

1 голос
/ 21 марта 2020

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

Этот подход имеет подводные камни, что если какой-либо из API не удался и данные не были загружены для этого конкретного компонента, то в этом случае ни один из компонентов не будет показан на экране. Убедитесь, что вы обрабатываете такие случаи.

...