React如何处理菜单的展开和收缩效果？

在 React 中，可以通过状态管理来实现菜单的展开和收缩效果。以下是一种实现方式：
 
1. 创建菜单组件：
 
jsx格式：
import React, { useState } from 'react';

const MenuItem = ({ label, onClick }) => (
  <li>
    <button onClick={onClick}>{label}</button>
  </li>
);

const Menu = ({ items }) => {
  const [expandedIndex, setExpandedIndex] = useState(null);

  const handleItemClick = (index) => {
    setExpandedIndex(expandedIndex === index? null : index);
  };

  return (
    <ul>
      {items.map((item, index) => (
        <li key={item.label}>
          <button onClick={() => handleItemClick(index)}>
            {item.label}
          </button>
          {expandedIndex === index && (
            <ul>
              {item.subItems.map((subItem) => (
                <MenuItem key={subItem.label} label={subItem.label} />
              ))}
            </ul>
          )}
        </li>
      ))}
    </ul>
  );
};

export default Menu;
 
 
2. 在应用中使用菜单组件：
 
jsx格式：
import React from 'react';
import Menu from './Menu';

const App = () => {
  const menuItems = [
    {
      label: 'Item 1',
      subItems: [
        { label: 'SubItem 1.1' },
        { label: 'SubItem 1.2' },
      ],
    },
    {
      label: 'Item 2',
      subItems: [
        { label: 'SubItem 2.1' },
        { label: 'SubItem 2.2' },
      ],
    },
  ];

  return (
    <div>
      <Menu items={menuItems} />
    </div>
  );
};

export default App;
 
 
在这个例子中， Menu 组件使用 useState 来管理 expandedIndex 状态，该状态表示当前展开的菜单项的索引。当菜单项被点击时， handleItemClick 函数会根据当前展开的索引来决定是展开还是收缩该菜单项。如果点击的菜单项已经展开，则将 expandedIndex 设置为 null 以收缩它；如果点击的菜单项未展开，则将 expandedIndex 设置为该菜单项的索引以展开它。
 
通过这种方式，可以在 React 中实现菜单的展开和收缩效果。你可以根据实际需求进一步调整样式和交互逻辑。