react 折叠菜单

React 折叠菜单通常是指在用户界面设计中用于隐藏或显示内容的一种交互式组件。它通常由一个触发元素（比如一个箭头、按钮或图标）和一个可折叠的内容区域组成。当你点击触发元素时，内容区域会从可见变为不可见，反之亦然。在 React 中，可以利用组件化和状态管理来实现这个功能。

以下是实现一个简单的React折叠菜单的基本步骤：

1. **创建组件**：你可以创建一个名为 `FoldableMenu` 的组件，包含两个子组件：`ToggleButton` 和 `Content`。`ToggleButton` 负责切换折叠状态，`Content` 包含需要折叠的内容。

import React, { useState } from 'react';

const ToggleButton = (props) => {
  const [isExpanded, setIsExpanded] = props.toggleState;
  return (
    <button onClick={() => setIsExpanded(!isExpanded)}>
      {/* 按需添加图标或文本 */}
    </button>
  );
};

const Content = ({ isExpanded }) => (
  <div style={{ display: isExpanded ? 'block' : 'none' }}>
    {/* 内容区域 */}
  </div>
);

const FoldableMenu = ({ toggleState }) => (
  <>
    <ToggleButton toggleState={toggleState} />
    <Content isExpanded={toggleState} />
  </>
);

2. **使用组件**：在父组件中作为子组件引用并传递必要的状态。

function App() {
  const [expanded, setExpanded] = useState(false);

  return (
    <FoldableMenu toggleState={expanded} />
  );
}