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

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>

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

Answer 1

感谢@Randal的帮助,最终的解决方案为:
调整数据结构,类似这样

const treeData = [{
  title: 'Node1',
  value: '0-0',
  key: '0-0',
  children: [{
    title: 'Child Node1',
    value: '0-0-1',
    key: '0-0-1',
  }, {
    title: 'Child Node2',
    value: '0-0-2',
    key: '0-0-2',
  }],
}, {
  title: 'Node2',
  value: '0-1',
  key: '0-1',
}];

使用antd组件treeSelect,直接引用数据

class Demo extends React.Component {
  state = {
    value: undefined,
  }

  onChange = (value) => {
    console.log(value);
    this.setState({ value });
  }

  render() {
    return (
      <TreeSelect
        style={{ width: 300 }}
        value={this.state.value}
        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
        treeData={treeData}
        placeholder="Please select"
        treeDefaultExpandAll
        onChange={this.onChange}
      />
    );
  }
}

效果就是这样Demo

Answer 2

先把数组转成转成树形结构，推荐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>

Answer 3

Tree也支持treeData这个属性，好像文档中没有列出。不过数据的转成这样的：

[
    key: 'key',
    title: 'your title',
    children: []
]