TL;DR如果我理解正确的话,答案可能是“不可能”。但还有另一种解决方案...
我认为您正在尝试执行以下操作,将其描述为一系列步骤:
页面开始加载,<Loader />
组件显示“页面加载”动画
页面加载完成,<Loader />
组件被删除(或隐藏)并且<Page />
组件与“真实”页面内容一起插入(或显示)。
问题是这样的:记住你将 React 组件注入到页面中,如下所示:
ReactDOM.render(<Wrapper />, document.getElementById('app'));
在加载 DOM 之前,您实际上无法注入 React 组件。所以到了那个时候,要么<Loader />
出现大约 2 毫秒然后消失,或者根本不出现(因为 DOM 在注入页面时已经加载)。
如果你想展示一个 throbber 或其他简单的动画(如动画 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 />
- throbber 图像正在执行加载程序的工作。
这里的想法是,当页面加载时,颤动 GIF 将颤动直到 DOM 加载,此时 JQuery 的文档就绪事件将触发,并且该事件的内容将被触发。div#app
将被替换。
我没试过这个,但它should工作,前提是 React 实际上replaces的内容div#app
,而不是仅仅向其添加内容。如果情况并非如此,那么只需将文档就绪处理程序更改为如下所示即可:
$(document).ready(function () {
$('div#app img').remove();
ReactDOM.render(<Wrapper />, document.getElementById('app'));
});