React AntDesign Menu Sub Item... 让它像组件一样工作

Question

对于 AntD 菜单...我们使用<Menu> 、 <Menu.Item> 、 <SubMenu> 。

但我不想将这些用于导航，而是用于表示。 我想使用下拉菜单来显示 object 的属性。

例如。 苹果 -> 红色，水果； Cucumber -> 绿色，蔬菜； 将显示为一个菜单，其中 Apple 和 Cucumber 作为子菜单标题，每个下拉菜单分别为红色、水果和绿色、蔬菜。

但我不想预定义属性和子菜单标题。 如果它是一个组件（例如卡片），我可以让组件按照 object 进行渲染，这样如果有 10 个对象，就会渲染 10 个卡片（例如）。

是否可以对发送数据的<SubMenu>和<Menu.Item>执行相同操作，它首先查看键“名称”并呈现为子菜单标题并将属性单独呈现为子菜单中的菜单项？

有没有我可以使用的替代方案？

---

不确定我的问题是否很清楚......如果感到困惑，我很乐意澄清任何事情。

Answer 1

不确定这是否是您想要的

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Menu } from "antd";

const { SubMenu } = Menu;

const data = [
  {
    Name: "Apple",
    Colour: "red",
    Type: "fruit"
  },
  {
    Colour: "green",
    Type: "vegetable",
    Name: "Cucumber",
    Season: "spring"
  },
  {
    Name: "Book",
    Title: "hello",
    Author: "nick"
  }
];

const Sider = () => {
  const [openKeys, setOpenKeys] = React.useState(["sub1"]);

  const onOpenChange = (keys) => {
    const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
    if (data.indexOf(latestOpenKey) === -1) {
      setOpenKeys(keys);
    } else {
      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
    }
  };

  return (
    <Menu mode="inline" onOpenChange={onOpenChange} style={{ width: 256 }}>
      {data.map((each) => (
        <SubMenu key={each.Name} title={each.Name}>
          {Object.entries(each).map(
            ([key, value]) =>
              key !== "Name" && (
                <Menu.Item key={each.Name + "-" + key}>{value}</Menu.Item>
              )
          )}
        </SubMenu>
      ))}
    </Menu>
  );
};

ReactDOM.render(<Sider />, document.getElementById("container"));

CodeSandbox演示

让我知道这是否适合您