React - 在 DOM 渲染时加载屏幕?

Posted

技术标签:

【中文标题】React - 在 DOM 渲染时加载屏幕?【英文标题】:React - Loading screen while DOM is rendering? 【发布时间】:2019-09-28 19:10:01 【问题描述】:

我想在渲染 DOM 之前显示加载屏幕。在我的程序中。我正在检查是否有设备,然后它应该显示加载页面,直到渲染 DOM 否则显示未找到设备。

但页面显示未找到设备,然后在呈现 DOM 后显示设备。如果在渲染 DOM 之前有设备,我该如何解决这个问题并显示“正在加载”消息。

渲染设备也需要时间。所以我无法检查是否有设备 - 这就是它首先转到未找到设备的原因。

render() 
    const  devices  = this.props;

    if (this.state.isLoading) 
        return (
            <div>Loading!!!!!</div>
        );
    
    if (devices && devices.length > 0) 
        return (
            <div> // Devices table will be displayed
            </div>
        );
     else 
        return (
            <div>
                No Devices found
            </div>
        );
    

【问题讨论】:

只有当你的组件提供了一个至少有 1 个元素的设备数组时,你才会检查加载。您必须检查从父组件提供给该组件的数据。编辑:好的,所以你已经编辑了代码。 isLoading 在创建类时是否初始化为 true? 你的初始状态是什么? 只是为了一些额外的信息,显示No devices found应该是第一个?你用的是什么状态管理? 我不确定“DOM 渲染后”是什么意思,如果您看到返回的内容,那么它就会被渲染。您需要显示更多代码,isLoading 是如何定义的? 【参考方案1】:
render() 
    const  devices  = this.props;

      if (devices && devices.length > 0) 
          return (
                <div> // Devices table will be displayed
                </div>
        );
       else 
if(this.state.loading)                   //Not sure how you set the state
return ( <div>Loading...</div>)  


        return (
            <div>
                No Devices found
            </div>
        );
    

【讨论】:

以上是关于React - 在 DOM 渲染时加载屏幕?的主要内容,如果未能解决你的问题,请参考以下文章

React Native-在功能组件中首次加载/渲染屏幕时,如何使用从 AsyncStorage 读取的值启动 TextInput?

在渲染到屏幕之前对内存中的视频加载做出反应

使用 react-router-dom 中的 Route 时 ReactDOM 渲染出错

如何准备下一个屏幕才能反应原生导航?

React / Gatsby - 根据屏幕大小渲染不同的组件

在获取 API 调用之前反应加载屏幕