使用React向HTML标签添加类？

  • Z时代
  • 2024-01-10
  • 分类：问答

我在我的React项目中制作了一个模态，要求在打开模态时将一个类添加到主体，而在关闭模态时将其删除。

我可以通过运行一些添加/删除类的原始javascript来使用旧的jQuery方法，但是这听起来不像正常的React哲学。

我应该在顶层组件上使用setState来表示模态是打开还是关闭的状态？即使我这样做了，因为将其渲染到页面上的div中，它仍然是编辑body元素的副作用，因此这种额外的接线有什么好处吗？

回答：

使用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 });
}

以上是 使用React向HTML标签添加类？ 的全部内容， 来源链接： utcz.com/qa/415976.html

回到顶部