React AntDesign菜单子项..使其像组件一样工作

Question

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

但我不想用这些来导航，而是用来表示。我想使用这样的下拉列表来显示对象的属性。

例如，苹果->红色，果实；黄瓜->绿色，蔬菜；将显示为以苹果和黄瓜为子菜单标题的菜单，每个菜单的下拉菜单将分别为红色、水果和绿色、蔬菜。

但我不想预定义属性和子菜单标题。如果它是一个组件(例如卡片(，我可以使组件渲染每个对象，这样，如果有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演示

让我知道这是否适合你