React中管理多个子组件状态：使用cloneElement实现单选激活模式

import React, { useState } from "react";

// 假设 SidebarOption 和 SideBarContainers 是你的子组件
// import SidebarOption from "./SidebarOption";
// import SideBarContainers from "./SideBarContainers";

/**
 * SideBarItemList 组件：管理侧边栏子项的单选激活状态。
 *
 * 该组件通过状态提升和 React.cloneElement 实现：
 * 1. 内部维护一个 `selected` 状态，记录当前被激活子项的索引。
 * 2. 遍历其 children，为每个子项包裹一个 `<li>` 元素。
 * 3. `<li>` 的点击事件会更新 `selected` 状态。
 * 4. 使用 `React.cloneElement` 克隆子项，并注入 `isOpen` prop，
 *    根据子项的索引与 `selected` 状态是否匹配来决定其值。
 */
export const SideBarItemList = ({ children }) => {
  // 使用 useState 钩子来管理当前选中的子项的索引
  // null 表示初始时没有选中项
  const [selected, setSelected] = useState(null);

  return (
    <ul>
      {React.Children.map(children, (child, index) => {
        // 确保 child 是一个有效的 React 元素，避免对非元素类型调用 cloneElement
        if (!React.isValidElement(child)) {
          return child;
        }
        return (
          // 为每个子项提供一个唯一的 key，这对于列表渲染至关重要
          // 点击 <li> 时，更新父组件的 selected 状态为当前子项的索引
          <li key={index} onClick={() => setSelected(index)}>
            {/*
              使用 React.cloneElement 克隆子元素，并注入新的 props。
              - isOpen: 根据当前子项的索引是否与 selected 状态匹配来决定其激活状态。
            */}
            {React.cloneElement(child, {
              isOpen: index === selected,
              // 如果子组件内部有点击事件，且需要通知父组件，可以传递一个回调 prop
              // 例如：onItemClick: () => setSelected(index)
            })}
          </li>
        );
      })}
    </ul>
  );
};

import React, { Component } from "react";
import classes from "../../layout/Sidebar.module.css";
import { Link } from "react-router-dom";

/**
 * SidebarOption 组件：侧边栏选项。
 *
 * 该组件现在是“受控组件”，其激活状态由父组件通过 `isOpen` prop 传入。
 * 它不再维护自己的内部 `open` 状态。
 */
class SidebarOption extends Component {
  // 移除内部的 `open` 状态和相关的 `setOpen`, `setStates` 方法
  // constructor(props) {
  //     super(props);
  //     this.state = {
  //         open: false,
  //     };
  // }
  // setOpen = () => { /* ... */ }
  // setStates = () => { /* ... */ }

  render() {
    // 从 props 中解构出所需的属性，包括父组件传递的 `isOpen`
    const { name, link, isOpen } = this.props;

    return (
      <div>
        <Link to={link}>
          <button
            // 根据 `isOpen` prop 的值来动态应用 CSS 类，从而改变样式
            className={isOpen ? classes.dropdownbtnopen : classes.dropdownbtn}
            // `onClick` 事件现在可以移除，因为点击逻辑已由父组件的 `<li>` 处理。
            // 如果子组件内部有更复杂的点击行为，且需要通知父组件，
            // 则父组件应传递一个回调 prop (如 `onItemClick`) 给子组件，子组件再调用它。
          >
            {name}
          </button>
        </Link>
      </div>
    );
  }
}

export default SidebarOption;