create-реагировать-приложение: как загрузить HTML перед рендерингом React

Question

Я пытаюсь добавить заставку до загрузки React.

, так как я использую скрипты реакции / приложение реакции, мой index.tsx содержит только эту часть:

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

Я пытался добавить свой собственный div на той же странице, но он не отображается.

Я хотел бы отобразить простой пустой экран с моим изображением-заставкой на 1-секундном таймере, прежде чем реагировать на нагрузки, чтобы избежать / скрыть смещение элементов рендеринга.

** Если я добавлю экран в app.tsx, сдвиг произойдет до загрузки экрана

обновление

Как указал Rishabh ниже, index.html находится в / public папке. Таким образом, я в конечном итоге сочетал 2 подхода.

1. добавить экран перед началом реакции:

   <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(). Вместо <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 2

Так что просто зайдите в ваш index.html внутри вашей общей папки и внутри

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

добавляет код заставки, когда реагирует на загрузку, он заменяет весь контент внутри div на id root

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