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演示

讓我知道這是否適合您