在React中实现DIV作为单选按钮选项的选中状态管理

嘿，这事儿好办！要让这几个DIV实现单选效果，核心就是用React的状态来跟踪当前选中的选项，再配合条件渲染和样式区分就行。我给你写个完整的实现方案，直接就能用：

完整组件代码 #

首先是React组件的核心逻辑，用useState管理选中状态，遍历渲染每个选项：

import { useState } from 'react';

const OptionRadio = () => {
  // 初始化状态：当前选中的选项索引，默认无选中
  const [selectedIndex, setSelectedIndex] = useState(null);

  // 把选项列表抽出来，方便后续修改维护
  const options = ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"];

  return (
    <div className="options-wrapper">
      {options.map((option, index) => (
        <div
          key={index}
          // 动态添加选中样式类
          className={`option-card ${selectedIndex === index ? 'is-selected' : ''}`}
          // 点击时更新选中的索引
          onClick={() => setSelectedIndex(index)}
        >
          {/* 只有选中的选项才显示前置的...标记 */}
          {selectedIndex === index && <span className="selection-indicator">... </span>}
          {option}
        </div>
      ))}
    </div>
  );
};

export default OptionRadio;

配套样式（可选但推荐） #

加一点CSS让选中状态更直观，用户体验更好：

.options-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}

.option-card {
  padding: 12px 18px;
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.option-card:hover {
  background-color: #f8f9fa;
}

/* 选中时的样式 */
.option-card.is-selected {
  background-color: #e7f5ff;
  border-color: #4dabf7;
}

.selection-indicator {
  color: #4dabf7;
  font-weight: 600;
}

关键思路拆解 #

• 状态管理：用useState存当前选中的选项索引（也可以存选项的唯一ID，更适合复杂场景），点击DIV时更新这个状态。
• 条件渲染：通过判断当前索引是否等于选中索引，来决定是否显示前置的...标记。
• 样式区分：给选中的DIV加特殊样式，让用户一眼就能看出来哪个是选中状态。

扩展小技巧 #

如果你的选项是带唯一标识的对象（比如从接口获取的数据），可以把状态改成存选项的ID，这样更稳定：

// 示例选项对象
const options = [
  { id: 'opt_01', label: 'Option 1' },
  { id: 'opt_02', label: 'Option 2' },
  // ...其他选项
];

// 状态存选中的ID
const [selectedId, setSelectedId] = useState(null);

// 渲染时判断
<div
  key={option.id}
  className={`option-card ${selectedId === option.id ? 'is-selected' : ''}`}
  onClick={() => setSelectedId(option.id)}
>
  {selectedId === option.id && <span className="selection-indicator">... </span>}
  {option.label}
</div>

这样就完美实现了你要的单选功能啦！

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