antd树形控件编辑递归处理

最新推荐文章于 2023-11-02 16:09:43 发布

原创

最新推荐文章于 2023-11-02 16:09:43 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

本篇博客探讨如何在antd的树形控件中实现节点名称的编辑功能。通过递归处理树形结构数据，创建一个React项目，利用TreeNode的Title属性支持自定义，可以采用弹窗编辑或直接在节点上显示输入框进行编辑。

antd树形控件编辑递归处理

题目：

请根据下面的数据结构，使用antd的“树形控件”组件，构建一棵树形结构的，**并且支持对每个节点名称进行编辑修改（**编辑方式可以是弹窗编辑，也可以是将节点名称变为input框直接修改）。

要求：

自建React项目，可在本地运行，尽量保持代码风格良好可读。

树形结构数据：

[
  {
   
   
    title: '0-0',
    key: '0-0',
    children: [
      {
   
   
        title: '0-0-0',
        key: '0-0-0',
        children: [
          {
   
    title: '0-0-0-0', key: '0-0-0-0' },
          {
   
    title: '0-0-0-1', key: '0-0-0-1' },
          {