我有一些如下组件:
包装器:包装Loader和Page
加载器:一些动画
页面:页面内容
像这样的代码:
<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')
Kry*_*ten 15
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"document ready"事件处理程序来加载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将替换该内容.
我没有尝试过这个,但它应该有用,只要React实际上替换了内容div#app,而不仅仅是添加内容.如果情况并非如此,那么将文档就绪处理程序更改为以下内容就是一件简单的事情:
$(document).ready(function () {
$('div#app img').remove();
ReactDOM.render(<Wrapper />, document.getElementById('app'));
});
我最终使用的方法（不需要 JQuery）如下：
在index.html中，将loader元素放在根div之后
<div id="root">
</div>
<div id="preloader" class="pre-loader">
<img src="..."> </img>
</div>
然后在你的index.js中：
document.addEventListener("DOMContentLoaded", function(event) {
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<BrowserRouter>
<DashApp />
</BrowserRouter>
</Provider>
</React.StrictMode>,
document.getElementById("root")
);
const loadingScreen = document.getElementById("preloader");
loadingScreen.style.opacity = 0;
loadingScreen.style.display = "none";
});
所以基本上我们只是遵循与其他答案建议类似的方法，但不需要 JQuery 因为我们使用监听加载事件
document.addEventListener("DOMContentLoaded", function(event) { }
另一种方法是将加载器放置在根 div 中，这意味着 React 在加载时默认会覆盖它：
<div id="root">
<div id="preloader" class="pre-loader">
<img src="..."> </img>
</div>
</div>
我个人的完整方法可以在这个中看到
| 归档时间： |
|
| 查看次数： |
30948 次 |
| 最近记录： |