antdesign + react +react +tree自定义treeNode节点

注意: 如果自定义treeNode 需要将treeData 注释掉

import React, { useState, useEffect } from 'react';
import { Tree } from 'antd';
const { TreeNode } = Tree;

const getTreeNode = (data) => {
  if (data && data.length > 0) {
    return data.map((item) => {
      if (item.children) {
        return (
          <TreeNode key={item.key} title={item.title}>
            {getTreeNode(item.children)}
          </TreeNode>
        );
      }
      return (
        <TreeNode
          key={item.key}
          title={item.title}
        />
      );
    });
  }
  return [];
};

const TreeContent= () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    getHierarchy().then((res) => {
      setData(res.data);
      setLoading(false);
    });
  }, []);

  const handleCheck = (checkedKeys, e) => {
    console.log(e);
    console.log(checkedKeys);
  };
  return (
          <Tree
            **// treeData={data}**
            showLine
            blockNode
            autoExpandParent
            checkable
            onCheck={handleCheck}
          >
            {getTreeNode(data)}
          </Tree>
  );
};

export default TreeContent;

你可能感兴趣的:(react.js,javascript,前端)