create-react-app：如何在React呈现之前加载html

Question

我正在尝试在反应加载之前添加一个闪屏。

因为我使用的是react脚本/react-app，所以我的index.tsx只有以下部分：

ReactDOM.render(<App />, document.getElementById("root"));

我试着在同一个页面上添加我自己的div，但它没有显示出来。

我想显示一个简单的空白屏幕与我的飞溅图像在1秒定时器之前的反应加载，以避免/隐藏渲染元素的移动。

**如果我确实在app.tsx中添加了屏幕，则在屏幕加载之前会发生移动

更新

正如Rishabh在下面指出的，index.html在/public文件夹中。所以我最后结合了两种方法。

>

在react启动前添加屏幕：

<div id="root">
  <div id="dimScreen">
    <img src="/img/logo.png" />
  </div>
</div>

加载适当的装载机非顶部.5-1秒

class App extends Component {
    state = {
        loading: true
    }
    componentDidMount() {
        setTimeout(() => {
            this.setState({ loading: false });
        }, 1000);
    }
    render() {
        return (
            <React.Fragment>
                {
                    this.state.loading ?
                        <Loader />
                        : (
                            <div className="app">
                                <Header />
                                <MyComponent />
                            </div>
                        )
                }
            </React.Fragment>
        );
    }
}

到目前为止，这种方法是工作最好的，但如果我发现问题或更好的东西，将会更新

Answer 1

这是一个使用state和setTimeout()显示加载程序5秒钟的示例，您可以给出 的位置，而不是 启动屏幕组件。

import React, { Component } from 'react';

import Drawer from '../Drawer/Drawer';
import Loader from '../../components/UI/Spinner/Loader/Loader';

class App extends Component {
  state = {
    loading: true
  }

  componentDidMount(){
    setTimeout(() => {
      this.setState({loading: false});
    }, 5000);
  }

  render() {  
    return (
      <React.Fragment>
        {
          this.state.loading ? <Loader />: <Drawer />
        }
      </React.Fragment>
    );
  }
}

export default App;

希望有帮助！