请问如何进行antd的组件的内部的修改进而二次开发它，修改antd/tree内部的代码给item添加点击事件？

Question

在参考antd/tree的时候，
我想要关闭checkable和selectable，然后想要有点击的功能。
但是我看文档是没有这个功能的。

1、所以很想基于antd/tree进行二次封装做到可点击。
请问有什么可以指导一下可以做到此需求呢？

2、因为我看组件是这样，不知怎么修改内部内容

<DirectoryTree
      className={styles.customAntTreeSwitcher}
      multiple
      defaultExpandAll
      onSelect={onSelect}
      onExpand={onExpand}
      treeData={props.data}
    />

如何才能做到修改antd/tree内部的代码给每个item添加点击事件呢。

传输的数据都是如下：

const treeData: DataNode[] = [
  {
    title: 'test-01',
    key: '0-0',
    children: [
      { title: 'test001', key: '0-0-0', isLeaf: true, selectable: false },
      { title: 'test002', key: '0-0-1', isLeaf: true, selectable: false },
      { title: 'test003', key: '0-0-2', isLeaf: true, selectable: false },
    ],
    selectable: false,
    icon: false,
  },
  {
    title: 'test-02',
    key: '0-1',
    children: [
      { title: 'test004', key: '0-1-0', isLeaf: true, selectable: false },
      { title: 'test005', key: '0-1-1', isLeaf: true, selectable: false },
    ],
    selectable: false,
    icon: false
  },
];

不知道如何进行二次开发请各位老师指导一下呢。

Answer 1

Answer 2

import React from 'react';
import { Tree } from 'antd';

const { DirectoryTree } = Tree;

const treeData = [
  {
    title: <div onClick={() => handleClick('0-0')}>test-01</div>,
    key: '0-0',
    children: [
      { title: <div onClick={() => handleClick('0-0-0')}>test001</div>, key: '0-0-0', isLeaf: true },
      { title: <div onClick={() => handleClick('0-0-1')}>test002</div>, key: '0-0-1', isLeaf: true },
      { title: <div onClick={() => handleClick('0-0-2')}>test003</div>, key: '0-0-2', isLeaf: true },
    ],
  },
  {
    title: <div onClick={() => handleClick('0-1')}>test-02</div>,
    key: '0-1',
    children: [
      { title: <div onClick={() => handleClick('0-1-0')}>test004</div>, key: '0-1-0', isLeaf: true },
      { title: <div onClick={() => handleClick('0-1-1')}>test005</div>, key: '0-1-1', isLeaf: true },
    ],
  },
];

function handleClick(key) {
  console.log('Item clicked:', key);
}

const MyTree = () => {
  return (
    <DirectoryTree
      multiple
      defaultExpandAll
      treeData={treeData}
    />
  );
};

export default MyTree;

Answer 3

你如果只是想要点击事件 直接添加即可

 <Tree.DirectoryTree
      multiple
      defaultExpandAll
      onSelect={()=>{ }}
      checkable={false}
      selectable={false}
      onClick={(event)=>{
        console.log('点击事件event',event, event.target);
      }}
      treeData={treeData}
    />

Answer 4

是的，@白水 的方法就行，自己 render 出来，在 render 节点上添加你需要的事件就行了 ~