不定层级数据如何以树形图形式渲染？

Question

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>

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