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 渲染出错