我有一些像下面这样的组件：
Wrapper：包装 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 完全加载后隐藏加载器并显示页面组件。
我应该如何在React 中编写 dom ready 事件？
像jQuery： $(window).on('ready')
TL;DR如果我理解正确，答案可能是“不可能”。但还有另一种解决方案......
这是我认为您正在尝试做的事情，描述为一系列步骤：
页面开始加载，<Loader />组件显示“页面加载”动画
页面完成加载，<Loader />组件被移除（或隐藏），<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 />- 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>
我个人的完整方法可以在这看到