我在我的React项目中创建了一个模态,它需要在模态打开时将一个类添加到正文中,并在它关闭时删除.
我可以通过运行一些添加/删除类的vanilla javascript来实现旧的jQuery方式,但这并不像普通的React哲学那样.
我应该在我的顶级组件上设置setState来说天气模式是打开还是关闭？即使我这样做了,因为它被渲染到页面上的div中,它仍然是编辑主体元素的副作用,所以这个额外的布线有什么好处吗？
解决方法
TL; DR使用document.body.classList.add和document.body.classList.remove
我将有两个函数切换一个状态来显示/隐藏外部组件中的模态.
在这些函数中,我将使用document.body.classList.add和document.body.classList.remove方法来操作依赖于模态状态的body类,如下所示：
openModal = (event) => {
document.body.classList.add('modal-open');
this.setState({ showModal: true });
}
hideModal = (event) => {
document.body.classList.remove('modal-open');
this.setState({ showModal: false });
}