加载屏幕显示时如何隐藏/显示所有反应组件？答案

【问题标题】：How to hide/show all react component when loading screen is showing up?加载屏幕显示时如何隐藏/显示所有反应组件？
【发布时间】：2021-11-14 16:08:36
【问题描述】：

在我的情况下，如果页面更改，加载屏幕将显示。
例如：
http://localhost:3000/ ----> http://localhost:3000/fr
页面转换时会显示加载屏幕

我想隐藏其他组件。我该怎么做？

import "tailwindcss/tailwind.css";
import "../styles/main.css";
import Router from "next/router";
import { useState } from "react";
import Loader from "../components/Loader/Loader";

function MyApp({ Component, pageProps }) {
  const [loading, setloading] = useState(false);
  Router.events.on("routeChangeStart", (url) => {
    // inspect the router changing start
    console.log("Router change...");
    setloading(true);
  });

  Router.events.on("routeChangeComplete", (url) => {
    // inspect the router changing complete
    console.log("Router change completed");
    setloading(false);
  });

  return (
    <>

      <Loader loadingbool={loading}/>
      <Component {...pageProps}/>
    </>
  );
}

export default MyApp;

【问题讨论】：

标签： reactjs next.js tailwind-css

【解决方案1】：

您可以在 JSX 中使用取决于 loading 值的三元组添加一些条件

  return (
      <>
        {loading ? <Loader loadingbool={loading}/> : <Component {...pageProps}/>}
      </>
    );

如果您希望组件仍然被渲染，有条件地添加一个依赖于loading 值的类（并使用.hidden 用css 隐藏。）

  return (
    <>
      <Loader loadingbool={loading} {...(!loading && {className:'hidden'})} />
      <Component {...pageProps} {...(loading && {className:'hidden'})} />
    </>
  );

【讨论】：

感谢您的回答。但是，加载屏幕的淡出动画不起作用。另外，我不认为它是预渲染。如果不预渲染，我的加载屏幕就没用了
你指的是哪个淡出动画？预渲染是什么意思？
我的意思是，我只想隐藏它而不是破坏它。 dom 仍然在这里，但将其设置为不可见。加载屏幕缓入。它的高度从 { opacity: 1; 慢慢变为 0 } 到 { 不透明度：0;高度：0； }

【解决方案2】：

通过使用布尔表达式我们可以隐藏屏幕数据

 return (
      <>
        {loading ? <Loader loadingbool={loading}/> : <Component {...data}/>}
      </>
    );

【讨论】：