Question

I am trying to add a splash screen before React loads.

since i am using react scripts / react-app my index.tsx only has this part:

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

i tried adding my own div on the same page but it doesn't show.

i would like to display a simple blank screen with my splash image on a 1 second timer before react loads to avoid/hide the shifting of the rendering elements.

** if i do add the screen in app.tsx, the shifting happens before the screen loads

update

as Rishabh pointed out below, index.html is in /public folder. So I ended up combining 2 approaches.

add a screen before react starts:

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

loading a proper loader non top for .5 - 1 sec

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>
        );
    }
}

so far this approach is working best but will update if i find issues or something better

Answer 1

所以只需转到公用文件夹内和内部的index.html

<div id="root"><-- Add Splash screen html code here --></div>

添加您的初始屏幕代码，当react加载时，它会将ID内的所有内容替换为root

Answer 2

这是一个使用state和setTimeout()向加载程序显示五秒钟的示例，您可以给<Loader/>代替splash screen component。

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;

我希望对您有帮助！

Answer 3

我不确定这是否会奏效，还没有经过测试，但是也许会带您正确的方向？所以，这是我的2美分

withSplash.js

const withSplash = MyAppComponent => 
  class extends React.Component {
    state = {
      showSplash: true
    }

    componentDidMount () {
      handleSplashComponent(); 
    }

    componentWillUnmount () {
      if (this.timer) {
        this.timer = null;
      }
    }

    handleSplashComponent = () => {
      this.timer = setTimeout(()=> {
        this.setState({
          showSplash: false
        })
      }, 3000)
    }

    render () {
      return this.state.showSplash
        ? <SplashComponent />
        : <MyAppComponent />
    }
  }

App.js

class App extends Component {
  ...
}

export default withSplash(App);

AnotherComponent.js

class AnotherComponent extends Component {
  ...
}

export default withSplash(AnotherComponent);

create-react-app: how to load html before React renders

3 个答案: