React中使用useRef实现多区块active类切换问题求助

你当前代码失效的核心原因是：单个useRef被多个DOM元素复用，最终ref.current只会指向最后一个挂载的区块元素，导致点击任何区块都只能操作最后一个。同时缺少区分不同区块的标识，无法实现单个区块的独立状态控制。

下面提供两种可行的解决方案：

方案一：使用useState跟踪激活的区块ID #

通过给每个区块分配唯一ID，用状态存储当前激活的ID，点击时切换该ID的激活状态，动态添加/移除jstbtn类。

import React, { useState } from "react";

function Homewrapcpy() {
  // 存储当前激活的区块ID，初始为null表示无激活状态
  const [activeId, setActiveId] = useState(null);

  const handleActiveBtn = (id) => {
    // 切换激活逻辑：如果当前激活的是目标ID，则取消激活；否则设置为目标ID
    setActiveId(prev => prev === id ? null : id);
  };

  return (
    <>
      {/* 第一个区块，绑定ID=1 */}
      <div className="pstfeedbackbtn">
        <div 
          className={`dflx lverct ${activeId === 1 ? 'jstbtn' : ''}`} 
          onClick={() => handleActiveBtn(1)}
        >
          <div className="svg">
            <div className="svg">
              <svg
                width="26"
                height="26"
                viewBox="0 0 26 26"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M24.7 25.9858C24.5838 26.0047 24.4652 26.0047 24.349 25.9858L17.316 24.0372C15.9218 24.4847 14.4643 24.7041 13 24.6867C9.64001 24.767 6.38513 23.5132 3.94844 21.1999C1.51175 18.8867 0.0919208 15.7026 0 12.3452C0.0919208 8.98777 1.51175 5.80366 3.94844 3.49039C6.38513 1.17712 9.64001 -0.0766894 13 0.00363456C16.36 -0.0766894 19.6149 1.17712 22.0516 3.49039C24.4882 5.80366 25.9081 8.98777 26 12.3452C25.9975 14.7458 25.2628 17.0887 23.894 19.0616L25.909 24.258C25.988 24.4768 26.0067 24.7128 25.9633 24.9413C25.9198 25.1698 25.8158 25.3825 25.662 25.5571C25.5405 25.6917 25.3921 25.7994 25.2264 25.8732C25.0607 25.947 24.8814 25.9854 24.7 25.9858ZM17.264 21.322C17.3807 21.3092 17.4983 21.3092 17.615 21.322L22.542 22.6991L21.242 19.2954C21.1543 19.0822 21.1249 18.8495 21.1569 18.6212C21.1889 18.3929 21.281 18.1772 21.424 17.9963C22.6904 16.3831 23.3854 14.3955 23.4 12.3452C23.3084 9.67681 22.1626 7.1534 20.2134 5.32732C18.2643 3.50125 15.6705 2.52125 13 2.60185C10.3295 2.52125 7.73572 3.50125 5.78657 5.32732C3.83742 7.1534 2.69162 9.67681 2.6 12.3452C2.69162 15.0135 3.83742 17.5369 5.78657 19.363C7.73572 21.1891 10.3295 22.1691 13 22.0885C14.3047 22.0865 15.5987 21.8534 16.822 21.4C16.9637 21.3486 17.1133 21.3222 17.264 21.322V21.322Z"
                  fill="#070707"
                />
              </svg>
            </div>
          </div>
          <span>345</span>
        </div>
      </div>
      {/* 第二个区块，绑定ID=2 */}
      <div className="pstfeedbackbtn">
        <div 
          className={`dflx lverct ${activeId === 2 ? 'jstbtn' : ''}`} 
          onClick={() => handleActiveBtn(2)}
        >
          <div className="svg">
            <svg
              width="26"
              height="26"
              viewBox="0 0 26 26"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M24.7 25.9858C24.5838 26.0047 24.4652 26.0047 24.349 25.9858L17.316 24.0372C15.9218 24.4847 14.4643 24.7041 13 24.6867C9.64001 24.767 6.38513 23.5132 3.94844 21.1999C1.51175 18.8867 0.0919208 15.7026 0 12.3452C0.0919208 8.98777 1.51175 5.80366 3.94844 3.49039C6.38513 1.17712 9.64001 -0.0766894 13 0.00363456C16.36 -0.0766894 19.6149 1.17712 22.0516 3.49039C24.4882 5.80366 25.9081 8.98777 26 12.3452C25.9975 14.7458 25.2628 17.0887 23.894 19.0616L25.909 24.258C25.988 24.4768 26.0067 24.7128 25.9633 24.9413C25.9198 25.1698 25.8158 25.3825 25.662 25.5571C25.5405 25.6917 25.3921 25.7994 25.2264 25.8732C25.0607 25.947 24.8814 25.9854 24.7 25.9858ZM17.264 21.322C17.3807 21.3092 17.4983 21.3092 17.615 21.322L22.542 22.6991L21.242 19.2954C21.1543 19.0822 21.1249 18.8495 21.1569 18.6212C21.1889 18.3929 21.281 18.1772 21.424 17.9963C22.6904 16.3831 23.3854 14.3955 23.4 12.3452C23.3084 9.67681 22.1626 7.1534 20.2134 5.32732C18.2643 3.50125 15.6705 2.52125 13 2.60185C10.3295 2.52125 7.73572 3.50125 5.78657 5.32732C3.83742 7.1534 2.69162 9.67681 2.6 12.3452C2.69162 15.0135 3.83742 17.5369 5.78657 19.363C7.73572 21.1891 10.3295 22.1691 13 22.0885C14.3047 22.0865 15.5987 21.8534 16.822 21.4C16.9637 21.3486 17.1133 21.3222 17.264 21.322V21.322Z"
                fill="#070707"
              />
            </svg>
          </div>
          <span>345</span>
        </div>
      </div>
    </>
  );
}

方案二：封装独立的区块组件（推荐） #

将重复的区块逻辑封装成独立组件，每个组件自行管理激活状态，无需父组件统一跟踪，逻辑更清晰，扩展性更强。

import React, { useState } from "react";

// 单个反馈按钮组件
const FeedbackBtn = ({ count }) => {
  const [isActive, setIsActive] = useState(false);

  const handleToggle = () => {
    setIsActive(prev => !prev);
  };

  return (
    <div className="pstfeedbackbtn">
      <div 
        className={`dflx lverct ${isActive ? 'jstbtn' : ''}`} 
        onClick={handleToggle}
      >
        <div className="svg">
          <div className="svg">
            <svg
              width="26"
              height="26"
              viewBox="0 0 26 26"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M24.7 25.9858C24.5838 26.0047 24.4652 26.0047 24.349 25.9858L17.316 24.0372C15.9218 24.4847 14.4643 24.7041 13 24.6867C9.64001 24.767 6.38513 23.5132 3.94844 21.1999C1.51175 18.8867 0.0919208 15.7026 0 12.3452C0.0919208 8.98777 1.51175 5.80366 3.94844 3.49039C6.38513 1.17712 9.64001 -0.0766894 13 0.00363456C16.36 -0.0766894 19.6149 1.17712 22.0516 3.49039C24.4882 5.80366 25.9081 8.98777 26 12.3452C25.9975 14.7458 25.2628 17.0887 23.894 19.0616L25.909 24.258C25.988 24.4768 26.0067 24.7128 25.9633 24.9413C25.9198 25.1698 25.8158 25.3825 25.662 25.5571C25.5405 25.6917 25.3921 25.7994 25.2264 25.8732C25.0607 25.947 24.8814 25.9854 24.7 25.9858ZM17.264 21.322C17.3807 21.3092 17.4983 21.3092 17.615 21.322L22.542