ttk-app-core/src/apps/app-demo/tree/async-data/app.js

@ttk/recat enterprise develop framework

// app.js
import React, {useState, useEffect} from 'react'
import Box from '@/components/floatbox';
import {Tree, Card} from 'antd'
const {TreeNode} = Tree
const {Fragment} = React
export default React.memo(Page)
function Page(props) {

  const [treeData, setTreeData] = useState([
    { title: 'Expand to load', key: '0' },
    { title: 'Expand to load', key: '1' },
    { title: 'Tree Node', key: '2', isLeaf: true },
  ])

  const onLoadData = treeNode =>
    new Promise(resolve => {
      if (treeNode.props.children) {
        resolve();
        return;
      }
      setTimeout(() => {
        treeNode.props.dataRef.children = [
          { title: `Child Node ${Math.random().toFixed(5)}`, key: `${treeNode.props.eventKey}-0` },
          { title: `Child Node ${Math.random().toFixed(5)}`, key: `${treeNode.props.eventKey}-1` },
        ];
        setTreeData([...treeData]);
        resolve();
      }, 300);
    });

  const renderTreeNodes = data =>
    data.map(item => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key} dataRef={item}>
            {renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode key={item.key} {...item} dataRef={item} />;
    });

  return (
    <Fragment>
    <Box className="box-aside" width="50%" height="100%">
      <Card
        title="异步加载"
        style={{height: "100%"}}
        className="ttk-card-form"
      >
        <Tree loadData={onLoadData}>{renderTreeNodes(treeData)}</Tree>
      </Card>
    </Box>
    <Box className="box-content" width="50%" height="100%">
    </Box>
    </Fragment>
  )
}