基于React状态重新分配元素Ref后点击事件未同步的问题解决问询

看起来你遇到的核心问题是：单个ref被重复绑定到不同元素时，自定义Hook的useEffect没有随着active状态切换重新执行，导致点击事件无法正确转移到新的激活元素上。

为什么原来的代码不生效？ #

你用了一个单一的ref对象，在循环中根据active状态把它赋值给对应的div。但useRef创建的对象在组件整个生命周期内是同一个引用——也就是说，当active切换时，ref.current指向了新的div，但element（也就是这个ref对象本身）并没有变化。而你的useClick Hook里的useEffect依赖的是element，所以它不会重新触发：

• 旧元素的点击事件没有被清理（因为useEffect的清理函数没执行）
• 新元素也没有添加上点击事件（因为useEffect没重新运行）

解决方案：使用Ref数组+调整Hook依赖 #

我们可以用一个ref数组来存储每个div的引用，同时修改useClick Hook的依赖，让它监听ref.current的变化，这样就能在active切换时正确转移点击事件。

第一步：修改组件代码，使用Ref数组

import { useState, useRef } from 'react';

// ...其他导入

const YourComponent = () => {
  const [active, setActive] = useState(0);
  // 创建一个ref数组，存储每个card的DOM引用
  const cardRefs = useRef<(HTMLDivElement | null)[]>([]);
  // 把当前激活元素的ref传给useClick
  const { element } = useClick({ current: cardRefs.current[active] });

  return (
    <div style={{ position: 'relative' }}>
      {cards.map((card, index) => (
        <div
          key={index} // 循环列表必备key属性，帮助React识别元素变化
          ref={(el) => cardRefs.current[index] = el} // 给每个div分配独立的ref
          {...(index !== active ? { 'aria-hidden': 'true' } : {})}
        >
          <Card>
            <div className={styles.title}>{card}</div>
          </Card>
        </div>
      ))}
    </div>
  );
};

第二步：调整useClick Hook的依赖与事件处理

import { useEffect, useCallback, RefObject } from 'react';

const useClick = (element: RefObject<HTMLElement>): { element: RefObject<HTMLElement>; } => {
  // 用useCallback缓存点击函数，避免每次渲染都创建新函数
  const onClick = useCallback(() => {
    console.log('clicked');
  }, []);

  useEffect(() => {
    const currentElement = element.current;
    if (!currentElement) return;

    // 给当前激活元素添加点击事件
    currentElement.addEventListener('click', onClick);

    // 清理函数：移除当前元素的点击事件（当active切换时执行）
    return () => {
      currentElement.removeEventListener('click', onClick);
    };
  }, [element.current, onClick]); // 依赖element.current，当它变化时重新执行

  return { element };
};

export default useClick;

为什么这个方案能生效？ #

1. Ref数组：每个div都有自己独立的ref，不会出现“覆盖”的情况，我们可以通过cardRefs.current[active]精准获取当前激活元素的DOM引用。
2. 依赖element.current：当active切换时，element.current指向了新的DOM元素，useEffect会重新触发：
   • 先执行上一次的清理函数，移除旧激活元素的点击事件
   • 再给新激活元素添加点击事件
3. useCallback缓存点击函数：避免因函数引用变化导致useEffect不必要的重复执行，提升性能。

额外小提示 #

• 如果你的cards数据是动态更新的，记得在组件更新时同步重置cardRefs数组的长度，避免出现索引不匹配的问题。

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