mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
1.5 KiB
1.5 KiB
order | title | ||||
---|---|---|---|---|---|
3 |
|
zh-CN
点击展开节点,动态加载数据。
en-US
To load data asynchronously when click to expand a treeNode.
import { Tree } from 'antd';
const TreeNode = Tree.TreeNode;
class Demo extends React.Component {
state = {
treeData: [
{ title: 'Expand to load', key: '0' },
{ title: 'Expand to load', key: '1' },
{ title: 'Tree Node', key: '2', isLeaf: true },
],
}
onLoadData = (treeNode) => {
return new Promise((resolve) => {
if (treeNode.props.children) {
resolve();
return;
}
setTimeout(() => {
treeNode.props.dataRef.children = [
{ title: 'Child Node', key: `${treeNode.props.eventKey}-0` },
{ title: 'Child Node', key: `${treeNode.props.eventKey}-1` },
];
this.setState({
treeData: [...this.state.treeData],
});
resolve();
}, 1000);
});
}
renderTreeNodes = (data) => {
return data.map((item) => {
if (item.children) {
return (
<TreeNode title={item.title} key={item.key} dataRef={item}>
{this.renderTreeNodes(item.children)}
</TreeNode>
);
}
return <TreeNode {...item} dataRef={item} />;
});
}
render() {
return (
<Tree loadData={this.onLoadData}>
{this.renderTreeNodes(this.state.treeData)}
</Tree>
);
}
}
ReactDOM.render(<Demo />, mountNode);