admin管理员组文章数量:1558041
基于 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;
}
版权声明:本文标题:【Ant Design】Tree树形控件踩坑记录 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1727341289a1109441.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论