嘿，我来帮你搞定这个需求！你想要点击列表项（除了按钮）时，选中项的边框从绿色变红，切换其他项时之前选中的项恢复绿色，同时点击按钮不会触发边框变化对吧？咱们一步步来实现：

首先，核心思路有这几点：

• 用React状态追踪当前选中的列表项ID，精准控制哪个项该显示红色边框
• 阻止按钮的点击事件冒泡，避免点击按钮时误触发父元素的选中逻辑
• 通过动态绑定类名来切换边框样式

先看完整的实现代码，我会在后面拆解关键部分：

/* 定义基础样式和选中状态样式 */
.App {
  border: 2px solid green;
  margin: 10px 0;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer; /* 可选：给可点击元素加光标提示，提升交互体验 */
}

.App.selected {
  border-color: red;
}

import { useState } from "react";

const data = [
  { id: "1", title: "first element" },
  { id: "2", title: "second element" },
  { id: "3", title: "third element" },
];

export default function App() {
  // 状态：记录当前选中项的ID，初始为null表示无选中项
  const [selectedId, setSelectedId] = useState(null);

  // 处理列表项的点击事件
  const handleItemClick = (itemId) => {
    // 逻辑：如果点击的是当前选中项，就取消选中；否则切换到该项
    setSelectedId(prevId => prevId === itemId ? null : itemId);
  };

  // 处理子菜单按钮的点击事件，关键是阻止事件冒泡
  const handleButtonClick = (e) => {
    e.stopPropagation();
    // 这里可以添加你需要的子菜单逻辑，比如展开/折叠子菜单等
    console.log("子菜单按钮被点击啦！");
  };

  return (
    <div>
      {data.map((item) => (
        <div
          key={item.id} {/* React列表渲染必须加唯一key，用item.id最稳妥 */}
          id="main"
          // 动态拼接类名：选中时添加selected类，切换边框颜色
          className={`App ${selectedId === item.id ? "selected" : ""}`}
          onClick={() => handleItemClick(item.id)}
        >
          <div id="text">{item.title}</div>
          <button onClick={handleButtonClick}>submenu</button>
        </div>
      ))}
    </div>
  );
}

接下来拆解几个关键细节：

1. 状态管理：selectedId状态用来记录当前被选中的项，点击时通过setSelectedId更新状态，React会自动重新渲染组件，切换对应项的样式。
2. 阻止事件冒泡：按钮的handleButtonClick里调用了e.stopPropagation()，这样点击按钮时，事件不会向上传递到父元素#main，也就不会触发选中逻辑，完美符合你的需求。
3. 动态样式：通过模板字符串给className拼接selected类，当项的ID和selectedId匹配时，就会应用红色边框样式，否则用默认的绿色。
4. key属性：列表渲染时必须添加唯一的key，这里用每个项的id是最优选择，能帮助React高效更新列表。

如果需要初始状态就选中某个项，比如默认选中第一个元素，只需要把useState(null)改成useState("1")就可以啦！

备注：内容来源于stack exchange，提问作者Paul