在 ReactJS 中操作 DOM 是一个好习惯吗？

Question

你好，我对 ReactJS 很陌生。我正在为网站构建侧边栏导航。导航有 3 个级别，因此我使用以下逻辑构建了一个递归导航栏：

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 应用程序之前我应该​​了解什么？

Answer 1

在大多数情况下，我真正的意思是大多数情况下，您不需要操作 DOM。所以，是的，这不是一个好的做法，特别是在这种情况下，您可以非常轻松地使用 JSX 在渲染方法内有条件地切换这些类。这样做基本上并没有使用 React 的主要目的，即保持 DOM 与应用程序的状态保持同步。至于在 React 中开发之前需要了解的内容，基本上，如果您阅读了一些文档，您就会意识到可以如何轻松地利用状态和 JSX 来更轻松地以更可维护和更容易的方式解决这些问题。可读的时尚。

我可能会补充的原因之一是在没有 React 的情况下处理应用程序的 UI 状态，并且手动操作 DOM 非常容易出错且难以维护。它会很快失去控制，并导致难以调试有关维护不善的状态的问题。

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