我有一些如下所示的组件:
包装器:包装加载器和页面
加载器:一些动画
页面:页面内容
像这样的代码:
<body> <div id="app"></div> </body> class Loader extends Component {} class Page extends Component {} class Wrapper extends Component { render() { return ( <Loader/> <Page /> ); } } ReactDOM.render(<Wrapper />, document.getElementById('app'));
在DOM完全加载之后,我想隐藏Loader并显示Page组件。
我应该如何在 React中 编写dom ready事件?
像jQuery: $(window).on('ready')
$(window).on('ready')
TL; DR 如果我正确理解,答案可能是“不可能”。但是还有另一种解决方案…
这是我认为您要尝试执行的操作,描述为一系列步骤:
页面开始加载,<Loader />组件显示“页面加载”动画
<Loader />
页面完成加载,<Loader />删除组件(或隐藏<Page />组件),并使用“真实”页面内容插入(或显示)组件。
<Page />
问题出在这里:请记住,您是将React组件像这样注入到页面中的:
ReactDOM.render(<Wrapper />, document.getElementById('app'));
在加载DOM之前,您实际上无法注入React组件。因此,到那时,要么<Loader />出现大约2毫秒然后消失,要么根本不出现(因为DOM在注入页面时已经被加载了)。
如果您尝试显示动感或其他简单动画(例如动画GIF),则可以尝试使用混合方法:
像这样设置您的HTML:
<body> <div id="app"><img src="throbber.gif" /></div> </body>
在您的脚本标签中,包括一个JQuery“文档就绪”事件处理程序以加载React组件:
class Page extends Component {} class Wrapper extends Component { render() { return ( <Page /> ); } } $(document).ready(function () { ReactDOM.render(<Wrapper />, document.getElementById('app')); });
请注意,我已经省略了<Loader />-抖动图像正在完成加载程序的工作。
这里的想法是,当页面加载时,动荡的GIF将会动摇起来,直到加载DOM,这时将触发JQuery的document ready事件并div#app替换内容。
div#app
我还没有尝试过,但是它 应该可以 工作,只要React实际上 替换 了的内容div#app,而不仅仅是在其上添加内容。如果不是这种情况,那么只需将文档就绪处理程序更改为以下内容即可:
$(document).ready(function () { $('div#app img').remove(); ReactDOM.render(<Wrapper />, document.getElementById('app')); });