React侧边栏切换动画实现及className报错咨询

一、先修复「Received false for a non-boolean attribute className」报错 #

这个报错的核心原因是你给组件的className属性传递了false值——React要求className必须是字符串、undefined或null。比如你可能写了类似这样的代码：

<div className={isOpen ? 'sidebar-open' : false}></div>

只需把false替换为空字符串即可解决：

// 方案1：基础条件判断
<div className={isOpen ? 'sidebar-open' : ''}></div>

// 方案2：更灵活的模板字符串（推荐，保留基础样式类）
<div className={`sidebar ${isOpen ? 'sidebar-open' : ''}`}></div>

二、实现宽度变化动画的最佳实践 #

动画不生效通常有几个常见坑，对应解决方案如下：

1. 禁用display: none切换，改用宽度/最大宽度 #

display属性的切换不会触发CSS过渡动画，必须通过修改width、max-width这类可过渡属性实现显示隐藏，同时给元素添加transition声明。

示例基础CSS：

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  background: #fff;
  /* 核心：指定过渡属性与时长 */
  transition: width 0.3s ease;
  /* 默认收起状态 */
  width: 0;
  overflow: hidden; /* 防止内容溢出 */
}

.sidebar-open {
  /* 展开状态宽度 */
  width: 280px;
}

2. 确保基础样式类始终存在 #

切换类名时，要保留侧边栏的基础样式类（比如.sidebar），只动态添加/移除控制展开的类。这样过渡属性不会被意外移除，React代码示例：

import { useState } from 'react';

function Sidebar() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(!isOpen)}>切换侧边栏</button>
      {/* 基础类始终保留，条件添加展开类 */}
      <div className={`sidebar ${isOpen ? 'sidebar-open' : ''}`}>
        <p>侧边栏内容</p>
      </div>
    </>
  );
}

3. 用max-width适配内容高度不确定的场景 #

如果侧边栏内容高度不固定，用width可能出现内容截断问题，改用max-width更流畅：

.sidebar {
  max-width: 0;
  transition: max-width 0.3s ease;
  overflow: hidden;
  /* 其他基础样式 */
}

.sidebar-open {
  max-width: 300px; /* 设置比实际内容宽的值即可 */
}

4. 检查是否有CSS规则覆盖过渡属性 #

排查是否存在!important标记、transition: none这类规则，意外覆盖了侧边栏的过渡设置。

三、完整可运行示例 #

React组件代码 #

import { useState } from 'react';
import './Sidebar.css';

export default function Sidebar() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="sidebar-wrapper">
      <button 
        className="toggle-btn" 
        onClick={() => setIsOpen(prev => !prev)}
      >
        {isOpen ? '收起侧边栏' : '展开侧边栏'}
      </button>
      <div className={`sidebar ${isOpen ? 'sidebar-expanded' : ''}`}>
        <h3>导航菜单</h3>
        <ul>
          <li>首页</li>
          <li>我的收藏</li>
          <li>设置中心</li>
        </ul>
      </div>
    </div>
  );
}

CSS样式文件（Sidebar.css） #

.sidebar-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px;
}

.toggle-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #2196f3;
  color: #fff;
  cursor: pointer;
}

.sidebar {
  background-color: #f5f5f5;
  height: 350px;
  padding: 16px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0;
  overflow: hidden;
  border-radius: 4px;
}

.sidebar-expanded {
  width: 240px;
}

.sidebar h3 {
  margin-top: 0;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

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