嗨，我是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应用之前我应该知道些什么？
[在大多数情况下，我的意思是在大多数情况下，您不需要操纵DOM。所以是的，这不是一个好习惯，特别是在这种情况下，您可以非常轻松地使用JSX有条件地在render方法中切换那些类。这样做基本上不使用React，因为它的主要目的是使DOM与您的应用程序状态保持最新。据您在使用React开发之前需要了解的内容，基本上，如果您阅读了一些文档，您将认识到可以轻松地利用状态和JSX来解决这些问题，并且更加容易，易于维护和维护。可读的方式。
我可能为此添加的一个原因是，在没有React的情况下处理应用程序的UI状态，而手动操作DOM容易出错且难以维护。它将很快失控，并导致难以调试的有关状态维护不良的问题。