gpt4 book ai didi

javascript - 在 ReactJS 中操作 DOM 是好习惯吗?

转载 作者:行者123 更新时间:2023-12-02 19:42:36 24 4
gpt4 key购买 nike

<分区>

嗨,我是 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 操作而遭到强烈反对。

So Is it good practice to manipulate DOM in ReactJS?

我错过了什么?在构建 ReactJS 应用程序之前我应该​​了解什么?

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com