在ReactJS中操作DOM是一种好的实践吗？

Question

在ReactJS中操作DOM是一种好的实践吗？

3

你好，我是一名ReactJS的新手。我正在为一个网站构建侧边栏导航。导航有三个级别，所以我使用以下递归逻辑构建了导航栏：

for all items in the array
  if item has childern
    buildNavigation()
  else return;
}

最初，所有的子元素都是隐藏的，但当菜单项被点击时，我通过遍历DOM来“使其可见”。

enableDropdown(e) {
  e.stopPropagation();
  let dropdownContent = e.currentTarget.getElementsByClassName(
    'dropdown-container'
  )[0];
  let directionIcon = e.currentTarget.getElementsByClassName(
    'menu-direction'
  )[0];
  // Toggle dropdown & animate caret symbol
  if (dropdownContent.style.display === 'block') {
    directionIcon.classList.add('direction-icon-reset');
    directionIcon.classList.remove('direction-icon-active');
    dropdownContent.style.display = 'none';
  } else {
    directionIcon.classList.add('direction-icon-active');
    directionIcon.classList.remove('direction-icon-reset');
    dropdownContent.style.display = 'block';
  }
}

enableSubMenu(e, link) {
  e.stopPropagation();
  this.props.history.push(link);
  let lis = document.getElementsByClassName('no-child');
  for (let i = 0; i < lis.length; i++) {
    lis[i].classList.remove('active');
  }
  e.currentTarget.classList.add('active');
}

但我在代码审查过程中因为直接进行DOM操作受到了巨大的抨击。

那么在ReactJS中进行DOM操作是一种好习惯吗？

我错过了什么？在构建ReactJS应用之前，我应该知道什么？

- Dheemanth Bhat

2

不，这是一种不好的做法。React使用ref来替代。 - demkovych

3

在这种情况下，他甚至不需要使用引用！引用不应该用于像这样的DOM操作。这是一种不好的做法。 - Ashkan Pourghasem

1

这绝对是不好的做法。 - svltmccc

谢谢大家，我会改进我的编程风格。 - Dheemanth Bhat

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ashkan Pourghasem · Accepted Answer

在大多数情况下，我真的是指大多数情况下，您不需要操作DOM。因此，在这种情况下，您可以使用JSX非常轻松地在render方法中有条件地切换这些类，所以这不是一个好的实践。这样做基本上没有使用React的主要目的，即将DOM与应用程序状态保持最新。至于在开发React之前需要了解什么，基本上如果您阅读一些文档，就会意识到您可以如何轻松地利用状态和JSX更轻松、更可维护、更易读地解决这些问题。

我可能会添加一个原因，即在没有React并手动操作DOM的情况下处理应用程序的UI状态非常容易出错且难以维护。它很快就会失控，并导致关于未经良好维护的状态的难以调试的问题。

https://reactjs.org/docs/state-and-lifecycle.html