React.js中不操作DOM实现单选高亮选中的正确方案

在React里实现单选高亮，核心是用状态控制视图，完全不需要手动操作DOM。你的思路已经对了一半，只需要在渲染的时候根据当前选中状态动态添加active类就行，具体改法如下：

完整代码示例 #

import { useState } from 'react';

const SizeSelector = () => {
  const size = ['s', 'm', 'l'];
  // 用状态跟踪当前选中的尺寸
  const [chosenSize, setChosenSize] = useState('');

  const handleSelectSize = (value) => {
    setChosenSize(value);
  };

  return (
    <div className='size-variants'>
      {size.map(value => {
        // 动态判断是否添加active类：当前value等于选中状态时，拼接active
        const itemClass = chosenSize === value ? 'size-item active' : 'size-item';
        return (
          <div 
            className={itemClass} 
            onClick={() => handleSelectSize(value)} 
            key={value}
          >
            {value.toUpperCase()}
          </div>
        );
      })}
    </div>
  );
};

export default SizeSelector;

关键逻辑说明 #

• 用useState声明chosenSize状态，存储当前选中的尺寸值。
• 渲染每个尺寸项时，通过chosenSize === value判断是否为当前选中项，动态生成className：选中的项会带上active类，未选中的只保留size-item。
• 点击项时更新chosenSize状态，React会自动重新渲染组件，同步更新所有项的类名，实现高亮切换。

这种方式完全符合React的声明式编程思想：你只需要描述“状态对应什么样的视图”，剩下的DOM更新工作交给React处理，避免了手动操作DOM可能导致的状态与视图不一致的问题。

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