用react 实现一个菜单树组件

好的，我可以回答这个问题。以下是一个简单的 React 菜单树组件的示例代码：

import React, { useState } from 'react';

function MenuItem({ item, onItemClick }) {
  const [isOpen, setIsOpen] = useState(false);

  function handleItemClick() {
    if (item.children) {
      setIsOpen(!isOpen);
    } else {
      onItemClick(item);
    }
  }

  return (
    <li>
      <a href="#" onClick={handleItemClick}>
        {item.label}
      </a>
      {item.children && isOpen && (
        <ul>
          {item.children.map(child => (
            <MenuItem key={child.id} item={child} onItemClick={onItemClick} />
          ))}
        </ul>
      )}
    </li>
  );
}

function MenuTree({ items, onItemClick }) {
  return (
    <ul>
      {items.map(item => (
        <MenuItem key={item.id} item={item} onItemClick={onItemClick} />
      ))}
    </ul>
  );
}

export default MenuTree;

这个组件接受一个菜单项数组和一个点击回调函数作为 props。菜单项数组应该包含每个菜单项的 id、label 和 children 属性，其中 children 是一个可选的子菜单项数组。当用户点击菜单项时，如果该项有子菜单项，则展开或收起子菜单，否则调用传入的 onItemClick 回调函数。

希望这个示例代码能够帮助你实现你的菜单树组件！