React中更新点击元素属性最优方案：实现aria-checked单选切换

你的需求是实现一组带aria-checked的<li>单选功能：点击其中一项时，将其aria-checked设为true，其余设为false。当前的实现思路有几个需要调整的地方，比如把DOM元素存在state里不符合React的状态管理原则，咱们来重构一下：

核心问题分析 #

• 你当前的state.items存储的是DOM元素，这不是React推荐的做法——state应该存储数据，而不是渲染出来的DOM节点，DOM应该由数据驱动生成。
• 单个checked状态无法区分多个选项的选中状态，需要一个能标识“当前选中项”的状态（比如选中项的ID、索引）。

正确实现示例 #

假设你的选项列表是一组带唯一标识的数据（比如从props传入或在组件内定义），我们可以这样实现：

class Parent extends React.Component {
  constructor(props) {
    super(props);
    // 用selectedItemId记录当前选中项的唯一标识，初始为null表示未选中
    this.state = { selectedItemId: null };
    this.handleItemClick = this.handleItemClick.bind(this);
  }

  // 点击事件：接收当前项的id，更新选中状态
  handleItemClick(itemId) {
    this.setState({ selectedItemId: itemId });
  }

  render() {
    // 示例选项数据，你可以换成自己的数据源（比如props.items）
    const items = [
      { id: 'item-1', text: '选项1' },
      { id: 'item-2', text: '选项2' },
      { id: 'item-3', text: '选项3' }
    ];

    return (
      <ul>
        {items.map(item => (
          <li
            key={item.id}
            // 根据当前选中状态设置aria-checked（注意是字符串值）
            aria-checked={this.state.selectedItemId === item.id ? "true" : "false"}
            // 点击时传入当前项的id
            onClick={() => this.handleItemClick(item.id)}
            // 可选：给选中项加样式，方便视觉区分
            style={{
              cursor: 'pointer',
              backgroundColor: this.state.selectedItemId === item.id ? '#e0e0e0' : 'transparent'
            }}
          >
            {item.text}
          </li>
        ))}
      </ul>
    );
  }
}

关键细节说明 #

1. 状态设计：用selectedItemId存储当前选中项的唯一标识，而非DOM元素，完全遵循“数据驱动视图”的React理念。
2. aria-checked设置：通过判断当前项的id是否等于selectedItemId，动态设置aria-checked为"true"或"false"（HTML属性要求字符串值，React会自动处理布尔值转字符串，但显式写字符串更规范）。
3. 点击事件处理：点击时直接传递当前项的id，避免操作DOM，所有状态更新都通过setState完成，保证组件状态的一致性。

如果你的选项没有唯一ID，也可以用索引代替（但推荐尽量用唯一ID，避免列表顺序变化时出现问题），只需要把selectedItemId改成selectedIndex，渲染时判断index === this.state.selectedIndex即可。

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