Ant Design中Tree组件使用（包括异步加载子节点）

import React, { Component } from 'react'import { Tree } from 'antd'const { DirectoryTree } = Tree;export default class tree extends Component {state = {}/*** 树*/getTreeData = () => {return [{.

duansamve

5120人浏览 · 2021-02-02 22:00:44

duansamve · 2021-02-02 22:00:44 发布

普通加载：

import React, { Component } from 'react'
import { Tree } from 'antd'

const { DirectoryTree } = Tree;

export default class tree extends Component {
    state = {

    }

    /**
     * 树
     */
    getTreeData = () => {
        return [
            {
                title: '机构一',
                key: '0-0',
                children: [
                    {
                        title: '用户一',
                        key: '0-0-0',
                        isLeaf: true,
                    },
                    {
                        title: '用户二',
                        key: '0-0-1',
                        isLeaf: true,
                    },
                    {
                        title: '用户三',
                        key: '0-0-2',
                        isLeaf: true,
                    },
                    {
                        title: '用户四',
                        key: '0-0-3',
                        isLeaf: true,
                    },
                    {
                        title: '用户五',
                        key: '0-0-4',
                        isLeaf: true,
                    },
                    {
                        title: '用户六',
                        key: '0-0-5',
                        isLeaf: true,
                    },
                ],
            },
            {
                title: '机构二',
                key: '0-1',
                children: [
                    {
                        title: '用户七',
                        key: '0-1-0',
                        isLeaf: true,
                    },
                    {
                        title: '用户八',
                        key: '0-1-1',
                        isLeaf: true,
                    },
                    {
                        title: '用户九',
                        key: '0-1-2',
                        isLeaf: true,
                    },
                    {
                        title: '用户十',
                        key: '0-1-3',
                        isLeaf: true,
                    },
                ],
            },
        ];
    }

    onSelect = (selectedKeys, info) => {
        console.log('selected', selectedKeys, info);
    };

    onCheck = (checkedKeys, info) => {
        console.log('onCheck', checkedKeys, info);
    };

    componentWillMount() {
        this.treeData = this.getTreeData();
    }

    render() {
        return (
            <div>
                <DirectoryTree
                    defaultExpandedKeys={['0-0-0', '0-0-1']}
                    defaultSelectedKeys={['0-0-0', '0-0-1']}
                    defaultCheckedKeys={['0-0-0', '0-0-1']}
                    onSelect={this.onSelect}
                    onCheck={this.onCheck}
                    treeData={this.treeData}
                />
            </div>
        )
    }
}

异步加载：

// 父组件 App.js
import logo from './logo.svg';
import './App.css';
import As from "./AsTree.js"

function App() {
  const onCheckTree = (value) => {
    console.log(value, '点击了')
  }

  return (
    <div className="App">
      <As clickTree={onCheckTree} baseApi={"https://xxx.xxx.cn"} token={"L6qbt0KutJyV0L8I_R6Mw7yYueNmSLCFLWx1Duqf3zQ.BdmQm8Kry1mobxOlGCgFt7mQsyRwiVPHO21aLJdM3hk"} />
    </div>
  );
}

export default App;

// 子组件 AsTree.js
import {
    Tree
  } from 'antd';
  import React, {
    useState,
    useEffect
  } from 'react';
  import { DownOutlined } from '@ant-design/icons';
  import './App.css';
  
  const updateTreeData = (list, key, children) =>
    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 = (props) => {
    const [treeData, setTreeData] = useState([]);
  
    useEffect(() => {
      fetch(`${props.baseApi}/api/efast/v1/entry-doc-lib`, {
        method: "GET",
        headers: {
          'authorization': "Bearer " + props.token
        }
      }).then((response) => response.json()).then(resJson => {
        const typeArr = [];
        const user_doc_lib = [];
        const department_doc_lib = [];
        const custom_doc_lib = [];
        const shared_user_doc_lib = [];
        const knowledge_doc_lib = [];
  
        for (let i = 0; i < resJson.length; i++) {
          if (typeArr.indexOf(resJson[i].type) < 0) {
            typeArr.push(resJson[i].type);
          }
  
          if (resJson[i].type === "user_doc_lib") {
            user_doc_lib.push({
              key: resJson[i]["id"],
              title: resJson[i]["name"],
              isLeaf: false
            });
          } else if (resJson[i].type === "department_doc_lib") {
            department_doc_lib.push({
              key: resJson[i]["id"],
              title: resJson[i]["name"],
              isLeaf: false
            });
          } else if (resJson[i].type === "custom_doc_lib") {
            custom_doc_lib.push({
              key: resJson[i]["id"],
              title: resJson[i]["name"],
              isLeaf: false
            });
          } else if (resJson[i].type === "shared_user_doc_lib") {
            shared_user_doc_lib.push({
              key: resJson[i]["id"],
              title: resJson[i]["name"],
              isLeaf: false
            });
          } else if (resJson[i].type === "knowledge_doc_lib") {
            knowledge_doc_lib.push({
              key: resJson[i]["id"],
              title: resJson[i]["name"],
              isLeaf: false
            });
          }
        }
  
        for (let i = 0; i < typeArr.length; i++) {
          if (typeArr[i] == "user_doc_lib") {
            typeArr[i] = {
              key: 0,
              title: "个人文档库",
              isLeaf: false,
              children: user_doc_lib
            };
          } else if (typeArr[i] == "department_doc_lib") {
            typeArr[i] = {
              key: 1,
              title: "部门文档库",
              isLeaf: false,
              children: department_doc_lib
            };
          } else if (typeArr[i] == "custom_doc_lib") {
            typeArr[i] = {
              key: 2,
              title: "自定义文档库",
              isLeaf: false,
              children: custom_doc_lib
            };
          } else if (typeArr[i] == "shared_user_doc_lib") {
            typeArr[i] = {
              key: 3,
              title: "共享个人文档库",
              isLeaf: false,
              children: shared_user_doc_lib
            };
          } else if (typeArr[i] == "knowledge_doc_lib") {
            typeArr[i] = {
              key: 4,
              title: "知识库",
              isLeaf: false,
              children: knowledge_doc_lib
            };
          }
        }
  
        setTreeData(typeArr)
      }).catch(err => console.log('Request Failed', err));
    }, [])
  
    const onLoadData = ({
      key,
      children
    }) =>
      new Promise((resolve) => {
        if (children) {
          resolve();
          return;
        }
  
        fetch(`${props.baseApi}/api/efast/v1/dir/list`, {
          method: "POST",
          headers: {
            'authorization': "Bearer " + props.token
          },
          body: JSON.stringify({
            docid: key
          }),
        }).then((response) => response.json()).then(resJson => {
  
          const options = [];
  
          for (let i = 0; i < resJson.dirs.length; i++) {
            options.push({
              key: resJson.dirs[i]["docid"],
              title: resJson.dirs[i]["name"],
              isLeaf: false
            });
          }
  
          for (let i = 0; i < resJson.files.length; i++) {
            options.push({
              key: resJson.files[i]["docid"],
              title: resJson.files[i]["name"],
              isLeaf: true
            });
          }
  
          setTreeData((origin) =>
            updateTreeData(origin, key, options),
          );
          resolve();
  
        }).catch(err => console.log('Request Failed', err));
      });
  
    const onCheck = (checkedKeys, info) => {
      console.log('onCheck', checkedKeys, info);
      props.clickTree(info);
    };
  
    return <Tree switcherIcon={<DownOutlined />} loadData={
      onLoadData
    }
      treeData={
        treeData
      }
      checkable={
        true
      }
      blockNode selectable={
        false
      }
      onCheck={onCheck}
    />;
  };
  
  export default App;

异步加载TS版：

// App.tsx
import React from 'react';
import './App.css';
import AnyShareTree from "./AnyShareTree"

function App() {
  const onCheckTree = (value: any) => {
    console.log(value, "test")
  }

  return (
    <div className="App">
      <AnyShareTree clickTree={onCheckTree} baseApi={"https://anyshare.aishu.cn"} token={"kx7e88Kd-GtUgdc43V2gd-PfYufsgpbPWK0OP9ieGOs.uymaPkjLUnq3-Cxo8zZ2Fi3WhW_d5U3s1LsMtIs2jvE"} />
    </div>
  );
}


export default App;

// AsTree.tsx
import { DownOutlined } from '@ant-design/icons';
import {
    Tree, message
} from 'antd';
// import type { DataNode, TreeProps } from 'antd/es/tree';
import React, {
    useState,
    useEffect
} from 'react';
import './App.css';

const AS_DownOutlined: any = DownOutlined;

interface DataNode {
    title: string;
    key: string;
    isLeaf?: boolean;
    children?: DataNode[];
}

interface IProps {
    baseApi: string;
    token: string;
    clickTree: (value: any) => any;
}

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<IProps> = (props: IProps) => {
    const [treeData, setTreeData] = useState<DataNode[] | []>([]);

    useEffect(() => {
        fetch(`${props.baseApi}/api/efast/v1/entry-doc-lib`, {
            method: "GET",
            headers: {
                'authorization': "Bearer " + props.token
            }
        }).then((response) => {
            if (response.ok) {
                return response.json()
            } else {
                return Promise.reject({
                    status: response.status,
                    statusText: response.statusText,
                    url: response.url
                })
            }
        }).then(resJson => {
            const typeArr: any = [];
            const user_doc_lib = [];
            const department_doc_lib = [];
            const custom_doc_lib = [];
            const shared_user_doc_lib = [];
            const knowledge_doc_lib = [];

            for (let i = 0; i < resJson.length; i++) {
                if (typeArr.indexOf(resJson[i].type) < 0) {
                    typeArr.push(resJson[i].type);
                }

                if (resJson[i].type === "user_doc_lib") {
                    user_doc_lib.push({
                        key: resJson[i]["id"],
                        title: resJson[i]["name"],
                        isLeaf: false
                    });
                } else if (resJson[i].type === "department_doc_lib") {
                    department_doc_lib.push({
                        key: resJson[i]["id"],
                        title: resJson[i]["name"],
                        isLeaf: false
                    });
                } else if (resJson[i].type === "custom_doc_lib") {
                    custom_doc_lib.push({
                        key: resJson[i]["id"],
                        title: resJson[i]["name"],
                        isLeaf: false
                    });
                } else if (resJson[i].type === "shared_user_doc_lib") {
                    shared_user_doc_lib.push({
                        key: resJson[i]["id"],
                        title: resJson[i]["name"],
                        isLeaf: false
                    });
                } else if (resJson[i].type === "knowledge_doc_lib") {
                    knowledge_doc_lib.push({
                        key: resJson[i]["id"],
                        title: resJson[i]["name"],
                        isLeaf: false
                    });
                }
            }

            for (let i = 0; i < typeArr.length; i++) {
                if (typeArr[i] === "user_doc_lib") {
                    typeArr[i] = {
                        key: 0,
                        title: "个人文档库",
                        isLeaf: false,
                        children: user_doc_lib
                    };
                } else if (typeArr[i] === "department_doc_lib") {
                    typeArr[i] = {
                        key: 1,
                        title: "部门文档库",
                        isLeaf: false,
                        children: department_doc_lib
                    };
                } else if (typeArr[i] === "custom_doc_lib") {
                    typeArr[i] = {
                        key: 2,
                        title: "自定义文档库",
                        isLeaf: false,
                        children: custom_doc_lib
                    };
                } else if (typeArr[i] === "shared_user_doc_lib") {
                    typeArr[i] = {
                        key: 3,
                        title: "共享个人文档库",
                        isLeaf: false,
                        children: shared_user_doc_lib
                    };
                } else if (typeArr[i] === "knowledge_doc_lib") {
                    typeArr[i] = {
                        key: 4,
                        title: "知识库",
                        isLeaf: false,
                        children: knowledge_doc_lib
                    };
                }
            }

            setTreeData(typeArr)
        }).catch(err => message.error(JSON.stringify(err)));
    }, [])

    const onLoadData = ({
        key,
        children
    }: any) =>
        new Promise<void>((resolve) => {
            if (children) {
                resolve();
                return;
            }

            fetch(`${props.baseApi}/api/efast/v1/dir/list`, {
                method: "POST",
                headers: {
                    'authorization': "Bearer " + props.token
                },
                body: JSON.stringify({
                    docid: key
                }),
            }).then((response) => {
                if (response.ok) {
                    return response.json()
                } else {
                    return Promise.reject({
                        status: response.status,
                        statusText: response.statusText,
                        url: response.url
                    })
                }
            }).then(resJson => {

                const options: any[] = [];

                for (let i = 0; i < resJson.dirs.length; i++) {
                    options.push({
                        key: resJson.dirs[i]["docid"],
                        title: resJson.dirs[i]["name"],
                        isLeaf: false
                    });
                }

                for (let i = 0; i < resJson.files.length; i++) {
                    options.push({
                        key: resJson.files[i]["docid"],
                        title: resJson.files[i]["name"],
                        isLeaf: true
                    });
                }

                setTreeData((origin) =>
                    updateTreeData(origin, key, options),
                );
                resolve();

            }).catch(err => message.error(JSON.stringify(err)));
        });

    const onCheck: any = (checkedKeys: any, info: any) => {
        console.log('onCheck', checkedKeys, info);
        props.clickTree(info);
    };

    return <Tree switcherIcon={<AS_DownOutlined />} loadData={onLoadData} treeData={treeData} checkable={true} blockNode selectable={false} onCheck={onCheck} />;
};

export default App;