React 18中如何通过类名获取并筛选子节点？

问题原因 #

你遇到的筛选失败问题，核心原因是CSS Modules会将类名编译为哈希化的唯一值，比如styles['launcherPos']最终渲染到DOM的类名可能是launcher_launcherPos_abc123，而非你写的原始字符串launcherPos。直接用element.classList.contains('launcherPos')自然匹配不到。

解决方案 #

这里提供两种可行方案，分别适配不同场景：

方案1：用CSS Modules编译后的类名筛选 #

既然你已经在使用CSS Modules，直接用导出的类名值作为判断条件即可：

修改useEffect中的筛选逻辑：

useEffect(() => {
  const launcherCircle = launcherCircleRef.current;
  if (!launcherCircle) return;

  // 用CSS Modules编译后的类名筛选
  const launcherChildren = launcherCircle.children;
  const circleElements = [...launcherChildren].filter(element => 
    element.classList.contains(styles['launcherPos'])
  );

  if (circleElements.length === 0) return;
  
  let angle = 360 - 190;
  let dangle = 360 / circleElements.length;

  for (let i = 0; i < circleElements.length; i++) {
    let circle = circleElements[i] as HTMLElement;
    angle += dangle;
    circle.style.transform = `rotate(${angle}deg) translate(${launcherCircle.clientWidth / 2}px) rotate(-${angle}deg)`;
  }
}, []);

方案2：用Ref数组直接收集目标元素（更符合React思路） #

避免从父节点筛选DOM，直接给每个launcherPos元素绑定Ref，存入数组后直接使用：

1. 在组件内创建Ref数组：

const LauncherComponent = () => {
  const launcherCircleRef = useRef<HTMLDivElement>(null);
  // 创建Ref数组存储所有launcherPos元素
  const launcherPosRefs = useRef<HTMLElement[]>([]);

  let modules: Module[] | null = GetModules();

  // ... 其他代码不变

2. 渲染模块时通过Ref回调收集元素：

{modules.map(function (module: Module, idx) {
  return (
    <div 
      key={idx} 
      className={styles['launcherPos']} 
      // 用回调Ref将元素存入数组
      ref={el => {
        if (el) launcherPosRefs.current[idx] = el;
      }}
    >
      <div className={`${styles['launcherButton']} ${enableLauncher(module)}`}>
        <img src={module.ImagePath} alt={module.Prefix} />
      </div>
    </div>
  )
})}

3. 修改useEffect直接使用Ref数组：

useEffect(() => {
  // 过滤掉空值，确保数组元素有效
  const circleElements = launcherPosRefs.current.filter(el => el != null);
  if (circleElements.length === 0) return;

  const launcherCircle = launcherCircleRef.current;
  if (!launcherCircle) return;

  let angle = 360 - 190;
  let dangle = 360 / circleElements.length;

  for (let i = 0; i < circleElements.length; i++) {
    let circle = circleElements[i];
    angle += dangle;
    circle.style.transform = `rotate(${angle}deg) translate(${launcherCircle.clientWidth / 2}px) rotate(-${angle}deg)`;
  }
}, [modules]); // 依赖modules，确保模块更新时重新执行布局逻辑

方案对比 #

• 方案1：改动最小，适合快速修复现有代码，但仍依赖DOM查询。
• 方案2：更符合React的声明式思维，直接获取目标元素，避免DOM筛选的不确定性，推荐长期使用。

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