React - 在 DOM 渲染时显示加载屏幕? [英] React - Display loading screen while DOM is rendering?

查看:27
本文介绍了React - 在 DOM 渲染时显示加载屏幕?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这是来自 Google Adsense 应用程序页面的示例.主页面之前显示的加载屏幕显示之后.

This is an example from Google Adsense application page. The loading screen displayed before the main page showed after.

我不知道如何用 React 做同样的事情,因为如果我让 React 组件渲染加载屏幕,它在页面加载时不会显示,因为它必须等待 DOM 之前渲染.

I don't know how to do the same thing with React because if I make loading screen rendered by React component, it doesn't display while page is loading because it has to wait for DOM rendered before.

更新:

我通过将屏幕加载器放在 index.html 中并在 React componentDidMount() 生命周期方法中将其删除来制作我的方法示例.

I made an example of my approach by putting screen loader in index.html and remove it in React componentDidMount() lifecycle method.

示例反应加载屏幕.

推荐答案

这可以通过将加载图标放在 html 文件(例如 index.html)中来完成,以便用户在 html 文件加载后立即看到图标已加载.

This could be done by placing the loading icon in your html file (index.html for ex), so that users see the icon immediately after the html file has been loaded.

当你的应用完成加载时,你可以简单地在生命周期钩子中删除那个加载图标,我通常在 componentDidMount 中这样做.

When your app finishes loading, you could simply remove that loading icon in a lifecycle hook, I usually do that in componentDidMount.

这篇关于React - 在 DOM 渲染时显示加载屏幕?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆