0

7月13日 更新
在antd TreeNode组件内找到了一个简单方案,从数据直接生成一个树形图,需要考虑的就是数据结构了,不需要考虑递归的问题。

需要根据一个不定层级的数据以树形图形式渲染一个菜单
数据结构如下:

[{"checked":null,"id":1,"name":"超级管理员","pId":0},{"checked":null,"id":2,"name":"采购区总","pId":3,},{"checked":null,"id":3,"name":"采购专员","pId":4},{"checked":null,"id":4,"name":"采购经理","pId":5},{"checked":null,"id":5,"name":"财务出纳","pId":6}]

组件为Antd TreeMenu,使用方式:

<TreeNode title={} key={}>
   <TreeNode title={} key={}>
   </TreeNode
</TreeNode>

尝试通过递归方式解决,虽然理解概念,但就是没有思路,希望得到解答!

1个回答

0

先把数组转成转成树形结构,推荐https://www.npmjs.com/package...

const treeNode = (props) =>
<div className="tree-node">
<div className="tree-node-name">{props.data.name}</div>
{props.data.children ?
<treeNode data={props.data.children}/>
: ''}
</div>

撰写答案