如何在CSS Module中动态设置className以适配CSSTransition库？

直接封装通用的useCSSTransitionClassNames hook即可，逻辑非常轻量，完全符合你需要的传参和返回结构要求：

import { useMemo } from 'react';

/**
 * 适配CSSTransition与CSS Module的类名生成hook
 * @param {string} name 过渡类名前缀
 * @param {object} styleSheet 引入的CSS Module对象
 * @returns {object} 可直接传入CSSTransition classNames属性的类名对象
 */
const useCSSTransitionClassNames = (name, styleSheet) => {
  return useMemo(() => ({
    appear: styleSheet[`${name}Appear`],
    appearActive: styleSheet[`${name}AppearActive`],
    appearDone: styleSheet[`${name}AppearDone`],
    enter: styleSheet[`${name}Enter`],
    enterActive: styleSheet[`${name}EnterActive`],
    enterDone: styleSheet[`${name}EnterDone`],
    exit: styleSheet[`${name}Exit`],
    exitActive: styleSheet[`${name}ExitActive`],
    exitDone: styleSheet[`${name}ExitDone`],
  }), [name, styleSheet]);
};

export default useCSSTransitionClassNames;

使用方法 #

1. 先在CSS Module文件中按[前缀]+[过渡阶段]的规则命名类，示例（前缀为fade）：

/* index.module.css */
.fadeEnter {
  opacity: 0;
}
.fadeEnterActive {
  opacity: 1;
  transition: opacity 300ms ease-in-out;
}
.fadeExit {
  opacity: 1;
}
.fadeExitActive {
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}

2. 组件内调用hook，直接将返回值传给CSSTransition的classNames属性即可：

import { useState } from 'react';
import CSSTransition from 'react-transition-group/CSSTransition';
import styles from './index.module.css';
import useCSSTransitionClassNames from './useCSSTransitionClassNames';

const Demo = () => {
  const [visible, setVisible] = useState(false);
  // 传入前缀名和CSS Module对象
  const fadeClassNames = useCSSTransitionClassNames('fade', styles);

  return (
    <>
      <button onClick={() => setVisible(!visible)}>切换显隐</button>
      <CSSTransition
        in={visible}
        timeout={300}
        classNames={fadeClassNames}
        unmountOnExit
      >
        <div>带淡入淡出过渡的元素</div>
      </CSSTransition>
    </>
  );
};

补充说明 #

• 用useMemo包裹返回对象是为了避免重复生成新对象导致CSSTransition不必要的重渲染，对性能无影响的场景也可以去掉useMemo直接返回对象
• 如果你不需要用到appear相关的首次入场过渡，可以直接删除hook中appear开头的三个字段，减少冗余
• 如果出现类名不生效的情况，优先检查CSS Module中的类名拼写是否和hook拼接规则一致

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