掌握React子组件状态管理：利用cloneElement实现单选激活模式

// 错误的尝试：直接修改 props.children
this.state.sidebarItems[x].open = true;

// SideBarItemList.jsx
import React, { useState } from "react";

/**
 * 侧边栏项目列表组件
 * 负责管理其子组件的激活状态，确保一次只有一个子组件处于打开状态。
 *
 * @param {object} props - 组件属性
 * @param {React.ReactNode} props.children - 传递给此组件的子元素
 */
export const SideBarItemList = ({ children }) => {
  // 使用 useState Hook 维护当前被选中子组件的索引
  // null 表示没有子组件被选中
  const [selectedIndex, setSelectedIndex] = useState(null);

  /**
   * 处理子组件点击事件的回调函数。
   * 当子组件被点击时，更新父组件的 selectedIndex 状态。
   *
   * @param {number} index - 被点击子组件在 children 列表中的索引
   */
  const handleChildClick = (index) => {
    // 如果点击的是当前已选中的子组件，则取消选中（设为 null）；
    // 否则，选中新的子组件（更新为新的索引）。
    setSelectedIndex(prevIndex => (prevIndex === index ? null : index));
  };

  return (
    <div className="sidebar-item-list">
      {/* 使用 React.Children.map 遍历所有子元素 */}
      {React.Children.map(children, (child, index) => {
        // 确保子元素是有效的 React 元素，而不是文本节点或 null
        if (!React.isValidElement(child)) {
          return child; // 非 React 元素直接返回
        }

        // 使用 React.cloneElement 克隆子元素，并注入新的 props
        return React.cloneElement(child, {
          // 注入 isOpen prop：如果子组件的索引与 selectedIndex 匹配，则为 true
          isOpen: index === selectedIndex,
          // 注入 onSelect prop：一个回调函数，子组件点击时调用它来通知父组件
          onSelect: () => handleChildClick(index),
          // 确保为列表中的每个元素提供一个唯一的 key
          // 优先使用子元素已有的 key，否则使用索引
          key: child.key || index
        });
      })}
    </div>
  );
};

export default SideBarItemList;

// SidebarOption.jsx
import React from "react";
import { Link } from "react-router-dom";
// 假设 classes 来自 CSS Modules，用于动态切换样式
import classes from "../../layout/Sidebar.module.css";

/**
 * 侧边栏选项组件
 * 作为一个受控组件，其打开/关闭状态由父组件通过 props 控制。
 *
 * @param {object} props - 组件属性
 * @param {string} props.id - 选项的唯一标识符
 * @param {string} props.name - 选项的显示名称
 * @param {string} [props.link] - 导航链接 (可选)
 * @param {boolean} props.isOpen - 控制组件是否处于打开状态
 * @param {function} props.onSelect - 当组件被点击时调用的回调函数
 */
const SidebarOption = ({ id, name, link, isOpen, onSelect }) => {
  return (
    <div>
      <Link to={link || "#"}>
        <button
          // 根据 isOpen prop 动态应用 CSS 类，实现高亮效果
          className={isOpen ? classes.dropdownbtnopen : classes.dropdownbtn}
          onClick={onSelect} // 当按钮被点击时，调用父组件传递的 onSelect 回调
        >
          {name}
        </button>
      </Link>
    </div>
  );
};

export default SidebarOption;

// App.js 或其他父组件中
import React from 'react';
import SideBarItemList from './SideBarItemList'; // 假设路径正确
import SidebarOption from './SidebarOption';
import SideBarContainers from './SideBarContainers'; // 假设 SideBarContainers 也已修改为受控组件

function App() {
  return (
    <SideBarItemList>
      <SidebarOption id="1" name="Startsida: Fjärrvärmenät" link="/heating-network" />
      <SidebarOption id="2" name="Startsida: Användare" link="/users" />
      <SideBarContainers id="3" name="Allmänt"
        options={[
            "Senaste uppdaterad", "Visa Pluginmoduler", "Öppna Arkivet", "Personliga inställningar",
            "Regionala inställningar", "Om Driftportalen"
        ]}/>
      <SideBarContainers id="4" name="Planering"
        options={[
            "Aktiviteter:", "+ Ny Aktivitet", "Visa Alla Öppna", "Visa Försenat", "Visa Alla Stängda", "Visa Alla Kategoriserat",
            "Att göra:", "+ Ny Att göra", "Visa Alla Öppna", "Visa Alla Stängda", "Visa Alla Kategoriserat",
            "Personal planering:", "+ Ny post", "Visa Alla enkel"
        ]} />
    </SideBarItemList>
  );
}

export default App;