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 添加到组件之后，它确实添加到了元素上，但是添加了 class 的元素上没有出现 CSS 样式，这是 React 正在做的事情吗？如何强制 CSS 重新呈现页面？

Answer 1

await 不会做任何有用的事情，除非您等待的值是承诺。 querySelector 返回 null 或元素：永远不会是承诺。 您的代码不会等待元素存在。

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

React 解决这个问题的方法是将切换的状态存储在 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 更改为按钮。这是一项重要的辅助功能，允许不使用指点设备访问页面的人激活菜单。您还应该为可访问性做更多的事情，this article 是一个很好的起点（尽管它使用传统的 DOM 而不是 React，因此您需要像我在这里所做的那样调整它以使用状态）。

功能完成后，React JS 不呈现

1 个答案: