React在编译后更改类名.querySelector变得毫无用处

Question

我是新手，所以也许有办法。我知道React使用虚拟DOM等，我甚至已经习惯了，但这次我不知道该怎么办。

我有一个可扩展的菜单，所以我创建了代码：

function OnClickExpander(){
var expander = document.querySelector(".expanderInactive");
expander.className="expanderActive";
}

我把代码放在这里：

<div className={Styles.expanderIcon} onClick={OnClickExpander}><FaAlignJustify/></div>

它应该起作用，但它没有起作用，因为react在编译后会更改类名。所以我取了新的类名并把它放在那里。工作得很好，但我想知道react是否会再次突然改变，也许是在更新后，因为我觉得这是一个快速解决方案，而不是最终解决方案。您将如何执行此代码？

import Styles from './Navbar.module.css';
import {Link} from 'react-router-dom';
import { FaAlignJustify } from "react-icons/fa";
function OnClickExpander(){
var expander = document.querySelector(".Navbar_expanderInativo__MnF1u");
expander.className="Navbar_expanderAtivo__B-4WW";
}

function Navbar(){
return(
<div>
<div className={Styles.expanderInativo}>a</div>
<div>
<ul className={Styles.menuSuperior}>
<li>Todos</li>
<li>Esportes</li>
<li>Novelas</li>
<li>Minha Cidade</li>
</ul>
</div>
<div className={Styles.MenuContainer}>
<div className={Styles.expanderIcon} onClick={OnClickExpander}><FaAlignJustify/></div>
<ul className={Styles.menu}>
<li><Link to="/">Inicio</Link></li>
<li><Link to="/contato">Contato</Link></li>
<li><Link to="/sobre">Sobre</Link></li>
</ul>
</div>
</div>
);
}
export default Navbar;

Answer 1

您看到的随机类名来自css模块。它们可以与react一起使用，但它们不是react的一部分。在任何情况下，您都不应该在react中进行直接的dom操作。相反，使用标准的反应技巧：state。渲染时，请检查状态并使用该状态拾取类名。如果要更改类名，请更改状态。

function Navbar() {
const [expanded, setExpanded] = useState(false)
// ...
<div className={expanded ? Styles.expanderActive : Styles.expanderActive}>a</div>
// ...
<div className={Styles.expanderIcon} onClick={() => {
setExpanded(!expanded)
}}><FaAlignJustify/></div>
}