Reactjs 如何使用React使预加载块在N秒后消失

React预加载程序后的代码输出未显示。只有预加载程序不断出现

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

  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>

导出默认类导航扩展组件{
render（）{
返回(
请等一下。。。
{/*/preload*/}
{/*顶部搜索区域开始*/}
{/*关闭按钮*/}
{/*形式*/}
搜索
{/*搜索按钮*/}
{/*顶部搜索区域结束*/}
{/*社交共享区开始*/}
{/*社交共享区结束*/}
{/*头区域开始*/}
{/*主标头开始*/}
{/*经典菜单*/}
{/*徽标*/}
{/*导航栏切换器*/}
{/*菜单*/}
{/*菜单关闭按钮*/}
{/*导航开始*/}

“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;

从“/Nav”导入导航；
从“./Components/Main”导入Main
类应用程序扩展组件{
render（）{
返回(
)
}
}
导出默认应用程序；

---

导航栏和主页组件应该已经呈现，但没有呈现任何内容，只是预加载显示到无限时间。

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

导出默认类导航扩展组件{
状态={
预加载：正确
}
componentDidMount（）{
//安装部件10秒后关闭预加载
设置超时(
（）=>this.setState（（）=>（{preload:false}）），
10000
);
}
render（）{
const{preload}=this.state；
返回(
{预加载&&
请等一下。。。
}
{/*/preload*/}
....
}
}

欢迎来到stackoverflow，你能用全部涉及的代码编辑你的答案吗？目前，你的问题中没有要研究的功能代码，人们无法猜测预加载程序是如何消失的。我已经编辑了它。因此，我看到的代码中肯定没有阻止预加载程序显示的内容。你希望它什么时候停止p显示？css也可能有帮助。延迟10秒或soI后，我很想提供帮助，但不清楚它是关于什么的。你正在尝试使用一些NPM库吗？请尝试组织它-首先是你的源代码

    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 */}
                ....
            }
        }