antd menu 支持层级折叠

import { Menu } from "antd";

import "antd/dist/antd.css";

import React, { useState, useEffect } from "react";

const list = [

{

title: "One",

key: "one",

children: [

{

title: "One_1",

key: "one_1",

children: [

{

title: "One_1_1",

key: "one_1_1"

},

{

title: "One_1_2",

key: "one_1_2"

}

]

},

{

title: "One_2",

key: "one_2",

children: [

{

title: "One_2_1",

key: "one_2_1"

},

{

title: "One_2_2",

key: "one_2_2"

}

]

},

{

title: "One_3",

key: "one_3"

}

]

}

];

export default function App() {

const [selectedKeys, setSelectedKeys] = useState([]);

const [openKeys, setOpenKeys] = useState([]);

useEffect(() => {

init(list);

}, []);

const init = (data, openKeys = []) => {

const obj = data[0];

if (obj.children) {

openKeys.push(obj.key);

return init(obj.children, openKeys);

}

setOpenKeys(openKeys);

setSelectedKeys([obj.key]);

};

const renderDom = (dom, f = []) => {

if (dom.children) {

return (

<Menu.SubMenu

title={dom.title}

key={dom.key}

onTitleClick={() => {

if (openKeys.includes(dom.key)) {

const keys = [...f];

const index = f.findIndex((item) => item === dom.key);

keys.splice(index, 1);

setOpenKeys(keys);

} else {

setOpenKeys([...f, dom.key]);

}

}}

>

{dom.children.map((item) => renderDom(item, [...f, item.key]))}

</Menu.SubMenu>

);

}

return <Menu.Item key={dom.key}>{dom.title}</Menu.Item>;

};

return (

<Menu

style={{ width: "200px" }}

mode="inline"

openKeys={openKeys}

selectedKeys={selectedKeys}

onClick={({ key }) => setSelectedKeys([key])}

>

{list.map((item) => renderDom(item, [item.key]))}

</Menu>

);

}