如何在reactJs中同时加载多个组件？

Question

这里我有4个组件，我在App.js中渲染所有这四个组件。这四个组件分别使用不同的API。因此，一个组件可以渲染得更快，而其他组件则可以渲染得更慢。我要在这里实现的是，在显示所有组件之前，我需要显示一个加载指示器。我尝试使用React Lazy加载和Suspense，但是没有运气。请帮我解决一下这个。在这里，我分享了我所做的代码。预先感谢。

code：

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;

Answer 1

您想在所有组件都呈现之前显示加载程序，然后您可以在父组件（您的情况下为Dashboard）中拥有一个计数器变量，并在每个组件获取数据并准备呈现时更新其值，在父组件中检查是否计数器等于所需的已加载组件数，然后渲染所有其他组件，并继续渲染加载器。

这种方法有陷阱，如果任何API失败并且没有为该特定组件加载数据，那么在这种情况下，所有组件都不会显示在屏幕上。确保也处理此类情况。