create-react-app：如何在 React 渲染之前加载 html

Posted 2023-02-22

【中文标题】create-react-app：如何在 React 渲染之前加载 html

【英文标题】：create-react-app: how to load html before React renders

【发布时间】：2019-08-10 04:02:01

【问题描述】：

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

因为我使用的是 react scripts / react-app，所以我的 index.tsx 只有这一部分：

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

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

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

** 如果我在 app.tsx 中添加屏幕，则在屏幕加载之前发生转移

更新

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

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

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

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

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

【问题讨论】：

转移是什么意思？为什么你的状态中没有类似 isLoading 的变量并有条件地渲染你的应用程序？就像它正在加载然后显示 null 或启动屏幕，一旦你准备好所有的东西就显示完整的应用程序？

本文第二个解决方案中的 sn-p 可能也有帮助：***.com/a/40989121/9598077

【参考方案1】：

因此，只需转到公用文件夹和内部的 index.html 即可

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

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

【讨论】：

没有 index.html。这是一个生成 index.tsx 的反应应用程序。我已经尝试在我的问题中添加我的启动页面

值得一提 - 如果您正在构建 PWA 并希望在 index.html <div id="root"> 中包含图像，请使用 SVG 或将图像转换为 base64 并使用数据 URI。这可确保图像最终出现在自动生成的预缓存清单中，因为数据直接嵌入到 index.html 中，而不是单独的图像文件中。

【参考方案2】：

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

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;

希望对你有帮助！

【讨论】：

到目前为止，这比我的 html 加载器好得多！

【参考方案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);

【讨论】：

谢谢！我尝试了这条路线，但到反应代码执行时为时已晚。我需要更直接的东西。 index.html 中的解决方案效果很好

实际上 index.html 解决方案仍然是生涩的 :( 我现在试试你的方法

嘿嘿还没有具体尝试过，因为另一个类似并且有效，但看起来它会起作用！