React中点击元素时如何仅修改被点击项的aria-expanded属性值

方案1：直接操作DOM（最简实现，完全符合需求） #

直接在点击事件回调里修改当前触发事件的DOM元素属性即可，不需要调整现有属性命名，也只会影响被点击的单个元素：

export default function MainContent() {
  const handleClick = (e) => {
    // 仅修改当前点击元素的aria-expanded属性
    e.target.setAttribute("aria-expanded", "true");
    // 如果需要切换真假状态可以替换为下面的代码
    // const currentVal = e.target.getAttribute("aria-expanded");
    // e.target.setAttribute("aria-expanded", currentVal === "true" ? "false" : "true");
  };

  return (
    <>
      <div aria-expanded='false' onClick={handleClick}>1</div>
      <div aria-expanded='false' onClick={handleClick}>2</div>
      <div aria-expanded='false' onClick={handleClick}>3</div>    
    </>
  );
}

该方案改动最小，无需引入额外状态，完全满足不替换aria-expanded属性、仅修改被点击项的要求。

方案2：受控状态实现（符合React最佳实践） #

如果希望遵循React单向数据流原则，避免直接操作DOM，可以通过状态跟踪每个元素的展开状态：

import { useState } from "react";

export default function MainContent() {
  // 数组索引对应三个div的顺序，存储每个元素的展开状态
  const [expandedList, setExpandedList] = useState([false, false, false]);

  const handleClick = (index) => {
    setExpandedList(prev => {
      const newList = [...prev];
      newList[index] = true; // 点击时仅将对应位置设为true，需要切换可改为!newList[index]
      return newList;
    })
  };

  return (
    <>
      <div aria-expanded={expandedList[0]} onClick={() => handleClick(0)}>1</div>
      <div aria-expanded={expandedList[1]} onClick={() => handleClick(1)}>2</div>
      <div aria-expanded={expandedList[2]} onClick={() => handleClick(2)}>3</div>    
    </>
  );
}

该方案状态可追溯，适合后续需要基于展开状态做其他逻辑处理的场景，同样不会修改属性命名，仅更新被点击项的属性值。

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