React组件库（如MUI/Bootstrap）如何动态修改元素className？

这种动态增减className实现菜单显示/隐藏的方式，核心是用React状态驱动样式类的切换，配合CSS过渡动画，既避免了直接操作DOM（比如jQuery），也不会因为条件渲染的挂载/卸载带来卡顿。下面是具体实现思路和代码示例：

1. 核心逻辑：状态控制className拼接 #

首先用React状态管理弹窗的显示状态，再根据状态动态拼接className。很多组件库会用clsx工具库来简化多条件className的拼接（也可以用模板字符串手动实现）。

基础实现（不用过渡库） #

import { useState } from 'react';
import clsx from 'clsx';

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

  // 根据状态拼接容器类名
  const containerClassName = clsx(
    'rw-popup-container',
    !isOpen && 'rw-slide-transition-exited'
  );

  return (
    <div>
      {/* 输入框点击切换状态 */}
      <input 
        type="text" 
        onClick={() => setIsOpen(!isOpen)} 
        placeholder="选择选项"
      />
      {/* 下拉容器 */}
      <div className={containerClassName}>
        {/* 下拉选项内容 */}
        <div className="rw-option">选项1</div>
        <div className="rw-option">选项2</div>
      </div>
    </div>
  );
}

对应的CSS：

/* 基础容器样式 */
.rw-popup-container {
  margin-top: 8px;
  border: 1px solid #ddd;
  padding: 8px;
  /* 定义过渡动画 */
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 1;
  transform: translateY(0);
}

/* 退出状态样式 */
.rw-slide-transition-exited {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none; /* 隐藏后不响应点击 */
}

/* 可选：过渡完成后设置display:none */
.rw-slide-transition-exited.hidden {
  display: none;
}

如果需要在过渡完成后设置display:none，可以监听transitionend事件：

import { useState, useEffect, useRef } from 'react';
import clsx from 'clsx';

function Multiselect() {
  const [isOpen, setIsOpen] = useState(false);
  const containerRef = useRef(null);

  const containerClassName = clsx(
    'rw-popup-container',
    !isOpen && 'rw-slide-transition-exited'
  );

  useEffect(() => {
    const handleTransitionEnd = (e) => {
      if (!isOpen && e.propertyName === 'opacity') {
        containerRef.current?.classList.add('hidden');
      } else if (isOpen) {
        containerRef.current?.classList.remove('hidden');
      }
    };

    const container = containerRef.current;
    container?.addEventListener('transitionend', handleTransitionEnd);
    return () => container?.removeEventListener('transitionend', handleTransitionEnd);
  }, [isOpen]);

  return (
    <div>
      <input 
        type="text" 
        onClick={() => setIsOpen(!isOpen)} 
        placeholder="选择选项"
      />
      <div ref={containerRef} className={containerClassName}>
        <div className="rw-option">选项1</div>
        <div className="rw-option">选项2</div>
      </div>
    </div>
  );
}

2. 专业组件库的常用方案：react-transition-group #

像MUI、React Bootstrap这类库，大多基于react-transition-group来处理过渡状态，它会自动管理过渡的各个阶段（进入、进入中、退出、退出中、已退出），无需手动监听事件。

示例代码 #

import { useState } from 'react';
import { CSSTransition } from 'react-transition-group';

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

  return (
    <div>
      <input 
        type="text" 
        onClick={() => setIsOpen(!isOpen)} 
        placeholder="选择选项"
      />
      {/* CSSTransition自动管理过渡类 */}
      <CSSTransition
        in={isOpen}
        timeout={300} // 过渡时长，和CSS对应
        classNames="rw-slide-transition"
        unmountOnExit={false} // 不卸载组件，仅隐藏
      >
        <div className="rw-popup-container">
          <div className="rw-option">选项1</div>
          <div className="rw-option">选项2</div>
        </div>
      </CSSTransition>
    </div>
  );
}

对应的CSS：

.rw-popup-container {
  margin-top: 8px;
  border: 1px solid #ddd;
  padding: 8px;
}

/* 进入初始状态 */
.rw-slide-transition-enter {
  opacity: 0;
  transform: translateY(-10px);
}

/* 进入动画中 */
.rw-slide-transition-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.3s ease;
}

/* 退出初始状态 */
.rw-slide-transition-exit {
  opacity: 1;
  transform: translateY(0);
}

/* 退出动画中 */
.rw-slide-transition-exit-active {
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

/* 退出完成状态 */
.rw-slide-transition-exited {
  display: none;
}

为什么这种方式响应迅速？ #

• 没有DOM的挂载/卸载操作：条件渲染会直接添加/删除DOM节点，带来额外开销；而这种方式只是修改元素的className，DOM节点始终存在，仅改变样式。
• 完全由React状态驱动：符合React的单向数据流，状态变化后React高效更新DOM属性，不会有jQuery直接操作DOM的副作用。
• CSS过渡是浏览器原生支持的动画，性能比JS动画更好。

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