16

我有一些组件如下：

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 就绪事件？

像 jQuery：$(window).on('ready')

4

2 回答 2

17

TL; DR如果我理解正确，答案可能是“不可能”。但是还有另一种解决方案...

这就是我认为您正在尝试做的事情，描述为一系列步骤：

  1. 页面开始加载，<Loader />组件显示“页面加载”动画

  2. 页面完成加载，<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 />- 颤动图像正在执行加载程序的工作。

这里的想法是，当页面加载时，跳动的 GIF 将跳动，直到加载 DOM，此时 JQuery 的文档就绪事件将触发并且内容div#app将被替换。

我还没有尝试过，但它应该可以工作，前提是 React 实际上替换了 的内容div#app，而不仅仅是向其附加内容。如果不是这种情况，那么只需将文档就绪处理程序更改为如下内容即可：

$(document).ready(function () {
    $('div#app img').remove();
    ReactDOM.render(<Wrapper />, document.getElementById('app'));
});
于 2016-07-29T04:35:03.967 回答
3

我最终使用的方法（不需要 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>

我个人的完整方法可以在这里看到

于 2020-11-20T23:59:41.980 回答