如何根据状态更改 className 并将其重新呈现在功能组件中答案

【问题标题】：How to change className based on state and re render it in a functional component如何根据状态更改 className 并将其重新呈现在功能组件中
【发布时间】：2021-10-18 06:09:30
【问题描述】：

我尝试了多种方法，但无法在功能组件中设置 className。不确定是什么问题。只需检查下面代码中的 navbar-menu，请建议如何解决此问题，我想在每次状态更改时更改 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>
      );
}

【问题讨论】：

标签： javascript reactjs react-functional-component

【解决方案1】：

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

我用上面的代码解决了。

【讨论】：

【解决方案2】：

在这种情况下你应该使用Template strings

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

【讨论】：