React 中的 load 事件不起作用。如何制作页面加载器？-解网

问：

我正在尝试制作一个页面加载器，所以我制作了一个必须添加加载事件的组件，但它根本不起作用：Loaderwindow

import React, {useEffect} from "react"
import './loader.sass'

const Loader = () => {
    useEffect(() => {
        console.log("Loading")
        window.addEventListener('load', () => console.log('Loaded'))
    }, [])
    return (
        <div id="loader">
            <div className="center">
                <div className="rect"></div>
                <div className="rect"></div>
            </div>
        </div>
    )
}

export default Loader

在文件中，这个组件是首先导入的，所以，正如我所认为的那样，它必须首先渲染并启动事件侦听器，但什么也没发生。App.jsx

React 渲染中有什么我不明白的地方吗？请告诉我您是否知道制作页面加载器的任何其他方法。我已经尝试过放入文件，在这种情况下，事件触发得太早了。我刚刚尝试了悬疑和懒惰，但这种方法不会等待样式和图像。addEventListenerindex.htmlload

javascript html reactjs dom 浏览器

    import React, { useEffect,useState } from "react"
    import './loader.sass'
    
    const Loader = () => {
    
      const [loader, setLoader] = useState(true);
    
      useEffect(() => {

 window.addEventListener('load', () => setLoader(false))
      }, [])
    
      return (
        <>
          {loader && <div id="loader">
            <div className="center">
              <div className="rect"></div>
              <div className="rect"></div>
            </div>
          </div>}
        </>
      )
    }
    
    export default Loader

const Loading = () => {
    return (
        <div className='fullscreen-overlay'>
            <div className='spinner-border text-light' role='status'>
                <span className='visually-hidden'>Loading...</span>
            </div>
        </div>
    );
};

ReactDOM.render(<Loading />, document.getElementById('root'));

.fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loading Spinner</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
</head>

<body>
  <div id="root"></div>
</body>

</html>

第 2 步：设计一个并与加载器组合Higher-Order Component (HOC)

在这里，您将设计一个 Loader 组件并将其与之前创建的 Loader 组件集成，以有效地管理加载行为。HOC

const withWindowLoad = (WrappedComponent) => {
    return (props) => {
        const [isLoading, setIsLoading] = useState(true);

        useEffect(() => {
            const handleWindowLoad = () => {
                setIsLoading(false);
            };

            window.addEventListener('load', handleWindowLoad);

            return () => {
                window.removeEventListener('load', handleWindowLoad);
            };
        }, []);

        return (
            <React.Fragment>
                {isLoading ? <LoadingComponent /> : <WrappedComponent {...props} />}
            </React.Fragment>
        );
    };
};

第 3 步：使用HOC

最后，您将利用来包装目标组件，确保在加载内容时显示加载动画。HOC

const YourComponent = () => {
    // Your component's content here
};

export default withWindowLoad(YourComponent);

上一个：如何防止网站检测到选项卡/窗口更改？

下一个：如何使用 java 脚本或其他任何东西使浏览器选项卡刷新当前选项卡以外的其他选项卡？

React 中的 load 事件不起作用。如何制作页面加载器？

Load event in React doesn't work. How to make a page loader?

评论

评论