javascript - 如何根据状态更改 className 并在功能组件中重新渲染

Question

我尝试了多种方法，但无法在功能组件中设置 className。不确定是什么问题。只需检查下面代码中的导航栏菜单，请建议如何解决此问题，我想在每次状态更改时更改 className。

import { useState } from "react";

export function NavBar(){
    const [isNavBarBurgerClicked, toggleButtonClicked] = useState(false)
    return (
        <div className="container">
            <nav className="navbar has-shadow">
                <div className="navbar-brand">
                    <a href="/" className="navbar-item is-ghost">
                        <img className="px-2 px-y" src="https://ik.imagekit.io/7bazciqzz/2043b8a8-cdb4-4006-93a5-eddd61951e65/logo-text_VEUR29gBD.png" alt="Site Logo" />
                    </a>
                    <button href="#" className="navbar-burger" onClick={() => {toggleButtonClicked(!isNavBarBurgerClicked)}}>
                        <span></span>
                        <span></span>
                        <span></span>
                    </button>
                </div>
                <div className="navbar-menu {isNavBarBurgerClicked ? 'is-active' : ''}">
                    <div className="navbar-end">
                        <div className="navbar-item">
                            <div className="control has-icons-left">
                                <div className="select">
                                    <select name="Location Select" id="loc_select">
                                        <option value="Kolkata">Kolkata</option>
                                        <option value="Bengaluru">Bengaluru</option>
                                    </select>
                                </div>
                                <div className="icon is-small is-left">
                                    <i className="fas fa-map-marker-alt"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
      );
}

标签： javascriptreactjsreact-functional-component

Answer 1

<div className={`navbar-menu ${isNavBarBurgerClicked ? 'is-active' : ''}`}>

我使用上面的代码来解决它。