mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-10 07:59:49 +08:00
60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Tree } from 'antd';
|
|
|
|
interface DataNode {
|
|
title: string;
|
|
key: string;
|
|
isLeaf?: boolean;
|
|
children?: DataNode[];
|
|
}
|
|
|
|
const initTreeData: DataNode[] = [
|
|
{ title: 'Expand to load', key: '0' },
|
|
{ title: 'Expand to load', key: '1' },
|
|
{ title: 'Tree Node', key: '2', isLeaf: true },
|
|
];
|
|
|
|
// It's just a simple demo. You can use tree map to optimize update perf.
|
|
const updateTreeData = (list: DataNode[], key: React.Key, children: DataNode[]): DataNode[] =>
|
|
list.map((node) => {
|
|
if (node.key === key) {
|
|
return {
|
|
...node,
|
|
children,
|
|
};
|
|
}
|
|
if (node.children) {
|
|
return {
|
|
...node,
|
|
children: updateTreeData(node.children, key, children),
|
|
};
|
|
}
|
|
return node;
|
|
});
|
|
|
|
const App: React.FC = () => {
|
|
const [treeData, setTreeData] = useState(initTreeData);
|
|
|
|
const onLoadData = ({ key, children }: any) =>
|
|
new Promise<void>((resolve) => {
|
|
if (children) {
|
|
resolve();
|
|
return;
|
|
}
|
|
setTimeout(() => {
|
|
setTreeData((origin) =>
|
|
updateTreeData(origin, key, [
|
|
{ title: 'Child Node', key: `${key}-0` },
|
|
{ title: 'Child Node', key: `${key}-1` },
|
|
]),
|
|
);
|
|
|
|
resolve();
|
|
}, 1000);
|
|
});
|
|
|
|
return <Tree loadData={onLoadData} treeData={treeData} />;
|
|
};
|
|
|
|
export default App;
|