我在我的React项目中制作了一个模态,要求在打开模态时将一个类添加到主体,而在关闭模态时将其删除。
我可以通过运行一些添加/删除类的原始javascript来使用旧的jQuery方法,但是这听起来不像正常的React哲学。
我应该在顶层组件上使用setState来表示模态是打开还是关闭的状态?即使我这样做了,因为将其渲染到页面上的div中,它仍然是编辑body元素的副作用,因此这种额外的接线有什么好处吗?
TL; DR的 使用document.body.classList.add和document.body.classList.remove
document.body.classList.add
document.body.classList.remove
我将使用两个函数来切换状态以显示/隐藏外部组件中的模态。
在这些函数中,我将使用document.body.classList.add和document.body.classList.remove方法根据模态的状态来操纵主体类,如下所示:
openModal = (event) => { document.body.classList.add('modal-open'); this.setState({ showModal: true }); } hideModal = (event) => { document.body.classList.remove('modal-open'); this.setState({ showModal: false }); }