React导航栏组件ID变更时CSS样式未更新问题求助

问题排查与修复方案 #

1. React语法问题 #

React中指定HTML类名需要使用className属性，你代码中多处使用了原生HTML的class属性，会导致类名不生效：

• <nav class='navbar'> 改为 <nav className='navbar'>
• <span class='bar'> 改为 <span className='bar'>
• <ul class='navbar-links'> 改为 <ul className='navbar-links'>

2. 状态绑定位置错误 #

你把showLinks控制的id属性绑定到了汉堡按钮元素上，但你需要控制显示/隐藏的是菜单列表.navbar-links，所以应该把状态绑定到<ul>元素上，而不是汉堡按钮：
删除汉堡按钮上的id={showLinks ? "active" : "hidden"}，加到<ul className='navbar-links'>上。

3. CSS选择器逻辑错误 #

• 你写的.navbar-links #active是选中.navbar-links内部id为active的元素，但你现在把active id直接加到了.navbar-links元素本身，所以选择器要改成#active.navbar-links
• 你的ul本身就是.navbar-links，不需要再写.navbar-links ul这种选择器，这是在找ul内部的子ul，你的DOM结构里不存在这个元素，对应的样式全部不会生效，把所有.navbar-links ul前缀的选择器里的ul删掉即可。

修改后的完整代码 #

React代码

import React, { useState} from "react";
import { Icon } from "semantic-ui-react";
import "../css/App.css";


export default function Navbar (props) {
    const [showLinks, setShowLinks] = useState(false)
    return(
        <nav className='navbar'>
            <Icon name='picture' size='large' className='brand' />
            <a href='#' className='toggle-button' onClick={() => setShowLinks(!showLinks)}>
                <span className='bar'></span>
                <span className='bar'></span>
                <span className='bar'></span>
            </a>
            <ul className='navbar-links' id={showLinks ? "active" : "hidden"}>
                <li><a href="/">Home</a></li>
                <li><a href="/store">Store</a></li>
                <li><a href="/cart">Cart</a></li>
                <li><a href="/checkout">Checkout</a></li>
            </ul>
        </nav>
    )
}

App.css代码

.navbar {
    display: flex;
    position: relative;
    justify-content: space-around;
    height: 50px;
    background-color: blue;
    color: white;
}

.brand {
    padding: 1rem;
}

.navbar-links {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.navbar-links li a {
    display:flex;
    color: white;
    padding: 1rem;
    text-decoration: none;
}

.navbar-links li:hover {
    background-color: #555;
}

.toggle-button {
    position: absolute;
    top: .75rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

.toggle-button .bar {
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 10px;
}

@media only screen and (max-width: 800px) {
    .navbar {
        height: 100%;
        align-items: flex-start;
        flex-direction: column;
    }

    .toggle-button {
        display: flex;
    }

    .navbar-links {
        display: none;
        width: 100%;
        flex-direction: column;
    }

    .navbar-links li {
        text-align: center;
        width: 100%;
    }

    .navbar-links li a{
        padding: .5rem 1rem;
        justify-content: center;
    }
    
    #active.navbar-links {
        display: flex;
        flex-direction: column;
    }
}

内容的提问来源于stack exchange，提问作者justin107d