基于 React 版
基础用法: 官方文档
坑位props: fieldNames
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
fieldNames | 自定义节点 title、key、children 的字段 | object | { title: title, key: key, children: children } | 4.17.0 |
示例:
import { Tree } from 'antd';
import React from 'react';
const treeData = [
{
title: 'parent 0',
id: '0-0',
children: [
{
title: 'leaf 0-0',
id: '0-0-0',
isLeaf: true,
},
{
title: 'leaf 0-1',
id: '0-0-1',
isLeaf: true,
},
],
}
];
const App = () => {
const onSelect = (selectedKeys, info) => {
console.log('selected', selectedKeys, info);
};
const onCheck = (checkedKeys, info) => {
console.log('onCheck', checkedKeys, info);
};
const drawerFieldNames = {
title: 'title',
key: 'id',
children: 'children'
}
return (
<Tree
checkable
defaultExpandedKeys={['0-0-0', '0-0-1']}
defaultSelectedKeys={['0-0-0', '0-0-1']}
defaultCheckedKeys={['0-0-0', '0-0-1']}
onSelect={onSelect}
onCheck={onCheck}
fieldNames={drawerFieldNames}
treeData={treeData}
/>
);
};
export default App;
根据上述示例,我们根据官方文档设定了自定义的字段对应名称,理论上应该按照我们设定的字段对应,但实际执行过程中会出现如下错误:
Warning: Tree node must have a certain key: [undefined]
Warning: Tree node must have a certain key: [undefined > undefined]
解决方案:
服务端/客户端对接数据时,将treeList数据增加上key字段;
例如:
formatBookmarksTreeList(list)
{
list.map((item)=>{
// 此行是重点
item.key = item.id;
if (item['children']){
item.children = formatBookmarksTreeList(item.children);
}
return item;
});
return list;
}