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;

猜你喜欢

转载自blog.csdn.net/qq_34574204/article/details/125728218
今日推荐