React使用useRef添加className失败，可获取类名但无法添加

问题代码中的错误点 #

• ref变量名不统一：定义时用了refs，调用时却用ref，且初始化应传入null（针对DOM元素的useRef初始化值需为null，而非空字符串）。
• 多元素复用同一个ref：两个选项div绑定了同一个ref，最终ref只会指向最后一个渲染的元素，点击第一个选项时无法操作目标DOM。
• JSX语法错误：{user.opt1}前多了多余的<符号，导致语法报错。
• 函数未定义：组件内未声明clicka函数，且函数参数user._id未被使用。

修正方案 #

方案1：使用多个独立的useRef（适配多元素场景）

每个选项元素绑定独立的ref，确保点击时能准确获取目标DOM：

import React, { useRef } from 'react';

const Slugg = ({ user }) => {
  // 为每个选项创建独立ref
  const optionRef1 = useRef(null);
  const optionRef2 = useRef(null);

  const clicka = (targetRef) => {
    // 可选：移除所有选项的correct类，实现单选效果
    optionRef1.current?.classList.remove('correct');
    optionRef2.current?.classList.remove('correct');
    // 给当前点击的元素添加类
    targetRef.current?.classList.add('correct');
  };

  return (
    <div>
      <div className="__options">
        <div 
          onClick={() => clicka(optionRef1)} 
          ref={optionRef1}  
          className="js-choose-answer"
        >
          <div>a</div>
          {user.opt1}
        </div>
      </div>

      <div className="__options">
        <div 
          onClick={() => clicka(optionRef2)} 
          ref={optionRef2}  
          className="js-choose-answer"
        >
          <div>b</div>
          {user.opt2}
        </div>
      </div>
    </div>
  );
};

export default Slugg;

方案2：使用React状态控制className（更符合React范式）

React更推荐通过状态管理DOM类名，而非直接操作DOM：

import React, { useState } from 'react';

const Slugg = ({ user }) => {
  const [selectedOption, setSelectedOption] = useState(null);

  const clicka = (optionKey) => {
    setSelectedOption(optionKey);
  };

  return (
    <div>
      <div className="__options">
        <div 
          onClick={() => clicka('opt1')} 
          className={`js-choose-answer ${selectedOption === 'opt1' ? 'correct' : ''}`}
        >
          <div>a</div>
          {user.opt1}
        </div>
      </div>

      <div className="__options">
        <div 
          onClick={() => clicka('opt2')} 
          className={`js-choose-answer ${selectedOption === 'opt2' ? 'correct' : ''}`}
        >
          <div>b</div>
          {user.opt2}
        </div>
      </div>
    </div>
  );
};

export default Slugg;

关键说明 #

• 使用useRef操作DOM时，每个DOM元素必须绑定独立的ref，避免复用导致的指向错误。
• 操作DOM时建议用可选链?.，防止ref未挂载时出现Cannot read properties of null错误。
• React中优先通过状态控制类名，减少直接DOM操作，更符合组件的声明式编程逻辑。

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