reactjs - 如何使用 React 使预加载器块在 N 秒后消失

Question

没有显示 React Preloader 之后的代码输出。只有预加载器不断出现

我已经尝试检查脚本，它运行良好！

  export default class Nav extends Component {
  render() {
    return (
      <div>
        <div id="preloader">
          <div>
            <div className="spinner">
              <div className="double-bounce1" />
              <div className="double-bounce2" />
            </div>
            <span>Wait, please...</span>
          </div>
        </div>
        {/* /Preloader */}
        {/* Top Search Area Start */}
        <div className="top-search-area">
          <div className="modal fade" id="searchModal" tabIndex={-1} role="dialog" aria-hidden="true">
            <div className="modal-dialog modal-dialog-centered" role="document">
              <div className="modal-content">
                <div className="modal-body">
                  {/* Close Button */}
                  <button type="button" className="btn close-btn" data-dismiss="modal"><i className="fa fa-times" /></button>
                  {/* Form */}
                  <form action="index.html" method="post">
                    <input type="search" name="top-search-bar" className="form-control" placeholder="Type keywords and hit enter..." />
                    <button type="submit">Search</button>
                  </form>
                  {/* Search Button */}
                  <div className="search-btn"><i className="icon_search" /></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        {/* Top Search Area End */}
        {/* Social Share Area Start */}
        <div className="razo-social-share-area">
          <a href="#" className="facebook"><i className="fa fa-facebook" /></a>
          <a href="#" className="twitter"><i className="fa fa-twitter" /></a>
          <a href="#" className="pinterest"><i className="fa fa-pinterest" /></a>
          <a href="#" className="instagram"><i className="fa fa-instagram" /></a>
          <a href="#" className="youtube"><i className="fa fa-youtube-play" /></a>
          <a href="#" className="ss-close-btn"><i className="arrow_right" /></a>
        </div>
        {/* Social Share Area End */}
        {/* Header Area Start */}
        <header className="header-area">
          {/* Main Header Start */}
          <div className="main-header-area">
            <div className="classy-nav-container breakpoint-off">
              <div className="container">
                {/* Classy Menu */}
                <nav className="classy-navbar justify-content-between" id="razoNav">
                  {/* Logo */}
                  <a className="nav-brand" href="index.html"><img src="./img/core-img/logo.png" alt="" /></a>
                  {/* Navbar Toggler */}
                  <div className="classy-navbar-toggler">
                    <span className="navbarToggler"><span /><span /><span /></span>
                  </div>
                  {/* Menu */}
                  <div className="classy-menu">
                    {/* Menu Close Button */}
                    <div className="classycloseIcon">
                      <div className="cross-wrap"><span className="top" /><span className="bottom" /></div>
                    </div>
                    {/* Nav Start */}
                    <div className="classynav">
                      <ul id="nav">
                        <li><a href="./index.html">Home</a></li>
                        <li><a href="#">Pages</a>
                          <ul className="dropdown">
                            <li><a href="./index.html">- Home</a></li>
                            <li><a href="./charts.html">- Charts</a></li>
                            <li><a href="./single-charts.html">- Charts Details</a></li>
                            <li><a href="./podcast.html">- Podcast</a></li>
                            <li><a href="./single-podcast.html">- Podcast Details</a></li>
                            <li><a href="./show.html">- Show</a></li>
                            <li><a href="./events.html">- Event</a></li>
                            <li><a href="./blog.html">- Blog</a></li>
                            <li><a href="./single-blog.html">- Blog Details</a></li>
                            <li><a href="#">- Dropdown</a>
                              <ul className="dropdown">
                                <li><a href="#">- Dropdown Item</a></li>
                                <li><a href="#">- Dropdown Item</a></li>
                                <li><a href="#">- Dropdown Item</a></li>
                                <li><a href="#">- Dropdown Item</a></li>
                              </ul>
                            </li>
                          </ul>
                        </li>

'root' 中的 App.js 如下 -

import Nav from './Nav';
import Main from './Components/Main'

class App extends Component {
  render() {
    return (
      <div>
        <Nav/>
        <Main /> 
      </div>
    )
  }
}





export default App;

导航栏和主页组件应该已经被渲染，但没有渲染任何东西，只是预加载器显示直到无限时间。

标签： reactjs

Answer 1

如果您希望预加载器在固定时间后消失，您可以使用componentDidMount、setTimeout和setState的组合：

    export default class Nav extends Component {
        state = {
            preloading: true
        }
        componentDidMount() {
            // turns preloading off 10 seconds after the component has mounted
            setTimeout(
                () => this.setState(() => ({ preloading: false })),
                10000
            );

        }

        render() {
            const { preloading } = this.state;
            return (
                <div>
                    {preloading &&
                    <div id="preloader">
                        <div>
                            <div className="spinner">
                                <div className="double-bounce1" />
                                <div className="double-bounce2" />
                            </div>
                            <span>Wait, please...</span>
                        </div>
                    </div>
                    }
                    {/* /Preloader */}
                ....
            }
        }