0

我正在尝试在 React 加载之前添加启动画面。

因为我使用的是反应脚本/反应应用程序，所以我的 index.tsx 只有这一部分：

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

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

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

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

更新

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

  1. 在反应开始之前添加一个屏幕：

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

加载适当的装载机非顶部 0.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>
        );
    }
}

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

4

3 回答 3

2

因此，只需转到您的公用文件夹和里面的 index.html

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

添加您的启动屏幕代码，当反应加载时，它会将 div 内的所有内容替换为 id root

于 2019-03-19T15:21:15.043 回答
1

这是一个使用 and 来显示加载器五秒钟的示例，您可以使用stateandsetTimeout()代替。<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;

我希望它有帮助！

于 2019-03-19T15:39:02.107 回答
0

我不确定这是否会起作用，它没有经过测试，但也许它会引导你走向正确的方向？所以，这是我的 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 />
    }
  }

应用程序.js

class App extends Component {
  ...
}

export default withSplash(App);

另一个组件.js

class AnotherComponent extends Component {
  ...
}

export default withSplash(AnotherComponent);
于 2019-03-19T15:38:51.543 回答