function 完成后 React JS 不渲染

Question

const handleMenu = async () => {
        let menu = await document.querySelector('.navbar-list');
        menu.classList.toggle('.navbar-list-active');
    }

return (
    <div className="navbar-list">
                    <div onClick={handleMenu} className="hamburger">
                    </div>
    </div>
)

问题是在将 class 添加到组件之后，它确实添加到了元素上，但是 CSS 样式没有出现在添加了 class 的元素上，这是 React 正在做的事情吗？ 如何强制 CSS 重新渲染页面？

Answer 1

除非您正在等待的值是promise ，否则await不会做任何有用的事情。 querySelector返回null或元素：从不返回 promise。 您的代码不会等待元素存在。

现在，您可以使用useRef获取对元素的引用，然后您可以在其上切换 class ……但不要。

React 解决这个问题的方法是将切换的 state 存储在 state 中，并在 JSX 中处理。

const MyComponent = () => {

    const [active, setActive] = useState(false);

    const classNames = ["navbar-list"];
    if (active) classNames.push("navbar-list-active"); 

    const handleMenu = () => setActive(!active);

    return (
        <div className={classNames}>
            <button onClick={handleMenu} className="hamburger">
                Toggle Menu
            </button>
        </div>
    ;)
}

请注意，我已将 div 更改为按钮。 这是一项重要的辅助功能，允许不使用指点设备访问页面的人激活菜单。 您应该为可访问性做更多事情， 这篇文章是一个很好的起点（尽管它使用传统的 DOM 而不是 React，因此您需要像我在这里所做的那样对其进行调整以使用 state）。