如何等待React组件渲染？渲染时显示加载屏幕？

Question

我有一个 React 应用程序。它有一个背景视频和 3 个在表单内使用的图像。

我想等待我的路线完全渲染后再显示。当它渲染时，它应该显示一个加载屏幕。

到目前为止我的项目：

我尝试过延迟加载组件，使用这种延迟加载语法：

const Component = lazy(() => import('./component/component'))

我还用 Suspense 组件包装了所有元素

代码用于说明目的。

<Box overflow="hidden" >
      <Suspense fallback={<Loading/>}>
        <MainBackground />
        <ToastContainer />
        <Navbar />
        <Routes>
          <Route path="/x" element={<x />}></Route>
          <Route path="/x" element={<x />}></Route>
          <Route path="/x" element={<x />}></Route>
          <Route path="/x" element={<x />}></Route>
          <Route path="/x" element={<x />}></Route>
          <Route path="/x" element={<x />}></Route>
        </Routes>
        <Footer />
      </Suspense>
    </Box>

然而，这并没有奏效。看起来延迟加载是等待组件加载，而不是等待组件渲染。

另外，我尝试在我的组件上使用 useEffect

const [loading, setLoading] = useState(true);

useEffect(() => {

   setLoading(false);
}, [])

所以我可以定义何时渲染组件（据我所知，人们说这个函数类似于 ComponentDidMount 并等待组件的渲染）。

但是，它仍然没有用，在加载页面时，我可以看到首先显示输入，然后是背景视频，然后是 3 个图像，最后是使用的段落。

我该怎么办？

视频/img 道具可能是造成这种情况的原因吗？我该怎么办？

Answer 1

如果我理解你的问题是正确的，你想显示加载，直到你需要的所有东西，比如img/vids都没有加载。正确的？ 试试这个，我还添加了 2 秒延迟，您可以根据需要进行自定义。

const Loading = () => {
  return (
    <div>
      <p>Loading...</p> 
    </div>
  );
};


const App = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => { 
    setTimeout(() => {
      setLoading(false);  
    }, 2000); 
  }, []);

  return (
    <Suspense fallback={<Loading />}>
      {loading ? (
        <Loading />
      ) : (
        <div>
          <MainBackground />
          <Navbar />
          <Routes>
            {/* your routes */}
          </Routes>
          <Footer />
        </div>
      )}
    </Suspense>
  );
}; 

让我知道它是否有效！