前端 - 请问如何进行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

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

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

Answer 3

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;