React中Bulma的is-active类样式不生效问题排查

核心问题分析 #

你遇到的问题主要出在两个点：页面刷新导致React状态丢失，以及CSS选择器优先级/结构不符合Bulma的默认规则。

1. 解决页面刷新后状态重置的问题 #

当前你通过点击事件更新currentPage状态，但用户直接通过URL跳转或刷新页面时，React组件会重新挂载，状态会被重置，导致is-current类无法正确添加。

修复方案：
在组件挂载时，根据当前URL路径初始化currentPage：

import { useEffect, useState } from 'react';

function Navbar() {
  const [currentPage, setCurrentPage] = useState('');

  useEffect(() => {
    // 根据URL路径判断当前页面
    const path = window.location.pathname;
    switch(true) {
      case path.includes('/myevents'):
        setCurrentPage('MyEvents');
        break;
      case path.includes('/mytasks'):
        setCurrentPage('MyTasks');
        break;
      case path.includes('/testing'):
        setCurrentPage('TestEnv');
        break;
      default:
        setCurrentPage('');
    }
  }, []);

  const handlePageChange = (page) => {
    setCurrentPage(page);
    // 如果使用React Router，建议用navigate跳转而非a标签的默认刷新
    // navigate(`/${page.toLowerCase().replace('TestEnv', 'testing')}`);
  };

  // ... 其余代码
}

另外，建议阻止a标签的默认跳转行为，避免页面刷新丢失状态：

<a 
  href="./myevents" 
  onClick={(e) => {
    e.preventDefault(); // 阻止默认刷新
    handlePageChange('MyEvents');
  }}
  className={currentPage === 'MyEvents' ? 'nav-link is-current' : 'nav-link'}
>

2. 修复CSS样式不生效的问题 #

Bulma的tabs组件默认是给<li>标签添加is-active类来标识当前页，而你给<a>标签加了is-current，再加上自定义CSS选择器优先级不足，导致样式无法覆盖Bulma的默认样式。

方案一：遵循Bulma的结构规则
把is-current替换成Bulma原生的is-active，并加到<li>标签上：

<li className={currentPage === 'MyEvents' ? 'is-active' : ''}>
  <a 
    href="./myevents" 
    onClick={(e) => {
      e.preventDefault();
      handlePageChange('MyEvents');
    }}
    className="nav-link"
  >
    <span>My Events</span>
  </a>
</li>

对应的CSS调整为更具优先级的选择器：

.tabs li.is-active .nav-link span {
  background-color: white;
}

方案二：提升自定义选择器优先级
如果坚持使用自己的is-current类，需要增强CSS选择器的特异性：

/* 更具体的选择器，覆盖Bulma默认样式 */
.tabs .nav-link.is-current span {
  background-color: white;
}

额外建议 #

如果你的应用是单页应用，强烈建议使用React Router来管理路由，用<Link>组件替代原生<a>标签，彻底避免页面刷新导致的状态丢失问题。

内容的提问来源于stack exchange，提问作者M-d