React Flow可能与document.body.classList.add一起使用null值

Question

我有一个反应组件,我改变了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

这个错误正是它听起来的样子.classList无法在可能为null的值上访问属性.(document.body)

document.body在document.readyState是交互式之前没有定义.您可以类似地等待domcontentready或load事件,但是您可能已经这样做了,因为您正在渲染React组件.

实际上,流程在这里很烦人,因为在浏览器环境document.body中定义一次后,它就会保持定义.

这是一些简单的解决方案:

你可以使用一个invariant函数:invariant(document.body); //如果document.body不存在,则抛出错误document.body.classList.remove('homepage');

或者将语句放在if块中:

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