React+Tailwind侧边栏异常：初始显示与三元运算符类识别问题

我仔细看了你的代码，发现几个关键问题导致了侧边栏初始显示、样式异常的问题，下面一步步帮你解决：

1. 无效的Tailwind类名：-left-100 #

Tailwind CSS的间距类里没有-left-100这个选项，你应该用-left-full（对应CSS的left: -100%）来让侧边栏完全移出视口，这是初始隐藏失败的核心原因之一。

2. 条件类的写法不合理 #

你把所有样式都堆在三元运算符里，不仅重复代码，还容易搞混基础样式和切换样式。正确的做法是把侧边栏的通用样式（比如固定定位、宽高、背景）放在基础类nav-menu里，只在条件中切换控制显示/隐藏的类。

3. JSX className的语法错误 #

在遍历SidebarData的部分，你写了className="{item.cName}"——这会把字符串{item.cName}直接当成类名，而不是解析变量值。应该去掉多余的引号，直接写className={item.cName}。

修复后的完整代码 #

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import * as FaIcons from 'react-icons/fa';
import * as AiIcons from 'react-icons/ai';
import { SidebarData } from './SidebarData';

function Navbar() {
  const [sidebar, setSidebar] = useState(false);
  const showSidebar = () => setSidebar(!sidebar);

  return (
    <>
      <div className="navbar flex bg-white text-black h-12 justify-start items-center m-0 p-0">
        <Link to="#" className="menu-bars ml-8 text-4xl bg-none">
          <FaIcons.FaBars onClick={showSidebar} />
        </Link>
      </div>
      {/* 提取通用样式，用translate类控制显示/隐藏，过渡更流畅 */}
      <nav className={`nav-menu fixed top-0 left-0 w-1/4 h-screen bg-white transition-all duration-300 ${sidebar ? 'translate-x-0' : '-translate-x-full'}`}>
        <ul className="nav-menu-items w-full" onClick={showSidebar}>
          <li className="navbar-toggle w-full flex justify-start items-center pt-8 pb-10">
            <Link to="#" className="menu-bars">
              <AiIcons.AiOutlineClose />
            </Link>
          </li>
          {SidebarData.map((item, index) => {
            return (
              <li key={index} className={item.cName}>
                <Link to={item.path} className="w-11/12 h-full flex items-center py-1 border">
                  {item.icon}
                  <span className="ml-1">{item.title}</span>
                </Link>
              </li>
            );
          })}
        </ul>
      </nav>
    </>
  );
}

export default Navbar;

关键修改说明 #

• 通用样式分离：把fixed top-0 w-1/4 h-screen bg-white这些侧边栏的固定样式放到nav-menu里，让代码更清晰，避免重复。
• 用translate实现平滑过渡：改用translate-x-0（显示时归位）和-translate-x-full（隐藏时移出视口），比直接修改left属性的过渡效果更自然，Tailwind原生支持这些类。
• 修复变量类名解析：修正了<li>标签中className的语法错误，让item.cName能正确应用到元素上。
• 统一过渡效果：添加transition-all duration-300让侧边栏的显示/隐藏动画更平滑一致。

这样修改后，侧边栏初始会完全隐藏，点击汉堡菜单时会平滑滑入，点击关闭按钮或菜单区域时又会平滑滑出，样式也能正常渲染了。

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