reactjs - React Flow 可能使用 document.body.classList.add 为 null 值

Question

我有一个 React 组件，可以在其中更改 html 正文类。该类在 componentDidMount 中添加，并在 componentWillUnmount 中删除。我正在使用 Flow 进行类型检查。当我运行 Flow 时，出现以下错误:

src/modules/homepage/HomePage.js:27
 27:         document.body.classList.remove('homepage')
                           ^^^^^^^^^ property `classList`. Property cannot be accessed on possibly null value
 27:         document.body.classList.remove('homepage')
             ^^^^^^^^^^^^^ null

任何人都可以建议如何抑制此错误或推荐的方法是什么？

谢谢

Answer 1

这个错误正如它听起来的那样。无法在可能为 null 值的情况下访问属性 classList。 (文档.body)

document.body 直到 document.readyState is interactive 才定义。您可以类似地等待 domcontentready 或 load 事件，但您可能已经在渲染 React 组件了。

实际上，流程在这里有点烦人，因为在浏览器环境中，一旦定义了 document.body，它就会保持定义状态。

以下是一些简单的解决方案:

您可以使用不变函数: 不变(文档.body)；//如果 document.body 尚不存在则抛出错误 document.body.classList.remove('主页');

或者将语句放在 if block 中:

if (document.body) {
    document.body.classList.remove('homepage') 
}