当前位置： 文江博客话题详情

使用ANTD将对象的Arry转换为ReactJ中的Collapsibe节点级别元素？

发布于 2025-02-06 10:22:26 字数 7908 浏览 1 评论 0原文

下面我有一系列对象。要考虑的主要内容是级别和子场。我希望它们根据水平和子场而变形。

级别属性是元素作为树结构从0开始的节点级别，并且可以是无限的。显示节点级别的文本为ServiceHeaderBlockTitle。还要记住的是，在每个节点级别中，都应该选择编辑其标题或添加新级别或删除级别。如果isserviceBlock属性是正确的，那么我们 不能 从该节点添加一个新级别。

为简单起见，我将链接附加到描述工作示例的视频：

工作示例

使用对象数组后的结构可被视为：

/*

-Level0(SubField("/")
--Level1(SubField"/1/")
--Level1(SubField"/2/")
----Level2(SubField"/2/1")
------Level3(SubField"/2/1/1")
------Level3(SubField"/2/1/2")
--------Level3(SubField"/2/1/2/1")
--Level1(SubField"/3/")
----Level2(SubField"/3/1")
----Level2(SubField"/3/2")
----Level2(SubField"/3/3")
--Level1(SubField"/4/")
----Level2(SubField"/4/1")
----Level2(SubField"/4/2")

... and so on
*/

请在下面找到数据：

[
  {
    "ServiceHeaderBlockId": 1,
    "ServiceHeaderBlockTitle": "Header",
    "SubField": "/",
    "Level": 0,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 57,
    "ServiceHeaderBlockTitle": "Project Administration",
    "SubField": "/1/",
    "Level": 1,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 58,
    "ServiceHeaderBlockTitle": "Innovation",
    "SubField": "/2/",
    "Level": 1,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 76,
    "ServiceHeaderBlockTitle": "Commercialization",
    "SubField": "/3/",
    "Level": 1,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 77,
    "ServiceHeaderBlockTitle": "Quality/Food Safety Audit",
    "SubField": "/4/",
    "Level": 1,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 78,
    "ServiceHeaderBlockTitle": "Co-Man sourcing",
    "SubField": "/3/1/",
    "Level": 2,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 79,
    "ServiceHeaderBlockTitle": "Co-Man Vetting",
    "SubField": "/3/2/",
    "Level": 2,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 80,
    "ServiceHeaderBlockTitle": "Line Trail",
    "SubField": "/3/3/",
    "Level": 2,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 81,
    "ServiceHeaderBlockTitle": "Gap Analysis",
    "SubField": "/4/1/",
    "Level": 2,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 82,
    "ServiceHeaderBlockTitle": "HACCP",
    "SubField": "/4/2/",
    "Level": 2,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 84,
    "ServiceHeaderBlockTitle": "Product Development",
    "SubField": "/2/2/",
    "Level": 2,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 59,
    "ServiceHeaderBlockTitle": "Project Charter",
    "SubField": "/1/1/",
    "Level": 2,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 60,
    "ServiceHeaderBlockTitle": "Internal Ideation",
    "SubField": "/1/2/",
    "Level": 2,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 61,
    "ServiceHeaderBlockTitle": "White Space Opportunity",
    "SubField": "/2/1/",
    "Level": 2,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 62,
    "ServiceHeaderBlockTitle": "Territory Mapping/Platform Design",
    "SubField": "/2/1/1/",
    "Level": 3,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 70,
    "ServiceHeaderBlockTitle": "Creative Council Session",
    "SubField": "/2/1/2/",
    "Level": 3,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 71,
    "ServiceHeaderBlockTitle": "Trends Report",
    "SubField": "/2/1/3/",
    "Level": 3,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 85,
    "ServiceHeaderBlockTitle": "Product Development Administration",
    "SubField": "/2/2/1/",
    "Level": 3,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 103,
    "ServiceHeaderBlockTitle": "Brand/Project Immersion",
    "SubField": "/1/1/1/",
    "Level": 3,
    "IsServiceBlock": true,
    "ResourceDescriptionId": 10,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 104,
    "ServiceHeaderBlockTitle": "Project Charter Preparation",
    "SubField": "/1/1/2/",
    "Level": 3,
    "IsServiceBlock": true,
    "ResourceDescriptionId": 23,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 105,
    "ServiceHeaderBlockTitle": "Timeline",
    "SubField": "/1/1/3/",
    "Level": 3,
    "IsServiceBlock": true,
    "ResourceDescriptionId": 23,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 106,
    "ServiceHeaderBlockTitle": "Project Organization-Data Collection",
    "SubField": "/1/1/4/",
    "Level": 3,
    "IsServiceBlock": true,
    "ResourceDescriptionId": 38,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 107,
    "ServiceHeaderBlockTitle": "Brand/Project Immersion",
    "SubField": "/1/2/1/",
    "Level": 3,
    "IsServiceBlock": true,
    "ResourceDescriptionId": 10,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 108,
    "ServiceHeaderBlockTitle": "Meeting-Internal",
    "SubField": "/1/2/2/",
    "Level": 3,
    "IsServiceBlock": true,
    "ResourceDescriptionId": 23,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 109,
    "ServiceHeaderBlockTitle": "Meeting Report",
    "SubField": "/1/2/3/",
    "Level": 3,
    "IsServiceBlock": true,
    "ResourceDescriptionId": 26,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 110,
    "ServiceHeaderBlockTitle": "Brand/Project Immersion",
    "SubField": "/2/1/1/1/",
    "Level": 4,
    "IsServiceBlock": true,
    "ResourceDescriptionId": 10,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 111,
    "ServiceHeaderBlockTitle": "Meeting-Internal",
    "SubField": "/2/1/1/2/",
    "Level": 4,
    "IsServiceBlock": true,
    "ResourceDescriptionId": 10,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 115,
    "ServiceHeaderBlockTitle": "Creative Council Brief",
    "SubField": "/2/1/3/1/",
    "Level": 4,
    "IsServiceBlock": true,
    "ResourceDescriptionId": 10,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 86,
    "ServiceHeaderBlockTitle": "Process Technology Assessment ",
    "SubField": "/2/2/1/1/",
    "Level": 4,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 87,
    "ServiceHeaderBlockTitle": "Analogue Cutting-Internal",
    "SubField": "/2/2/1/2/",
    "Level": 4,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 114,
    "ServiceHeaderBlockTitle": "Development Brief",
    "SubField": "/2/2/1/1/1/",
    "Level": 5,
    "IsServiceBlock": true,
    "ResourceDescriptionId": 10,
    "IsActive": true
  }
]

原文

Below I have a array of objects. The primary thing to consider is Level and SubField. I want them to be collapsible depending on the level and subfield.

The Level attribute is the node level on which the elements are as a tree structure starting from 0 and it can be infinite. The text to display the node level is ServiceHeaderBlockTitle. Also to keep in mind is that, in every node level there should be the option to edit its title or add new level or delete the level. If the IsServiceBlock attribute is true then we cannot add a new level from that node.

For simplicity, I am attaching a link to the video describing the working example:

Working Example

The structure after using the array of objects can be seen as:

/*

-Level0(SubField("/")
--Level1(SubField"/1/")
--Level1(SubField"/2/")
----Level2(SubField"/2/1")
------Level3(SubField"/2/1/1")
------Level3(SubField"/2/1/2")
--------Level3(SubField"/2/1/2/1")
--Level1(SubField"/3/")
----Level2(SubField"/3/1")
----Level2(SubField"/3/2")
----Level2(SubField"/3/3")
--Level1(SubField"/4/")
----Level2(SubField"/4/1")
----Level2(SubField"/4/2")

... and so on
*/

Please find the data below:

[
  {
    "ServiceHeaderBlockId": 1,
    "ServiceHeaderBlockTitle": "Header",
    "SubField": "/",
    "Level": 0,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 57,
    "ServiceHeaderBlockTitle": "Project Administration",
    "SubField": "/1/",
    "Level": 1,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 58,
    "ServiceHeaderBlockTitle": "Innovation",
    "SubField": "/2/",
    "Level": 1,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 76,
    "ServiceHeaderBlockTitle": "Commercialization",
    "SubField": "/3/",
    "Level": 1,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 77,
    "ServiceHeaderBlockTitle": "Quality/Food Safety Audit",
    "SubField": "/4/",
    "Level": 1,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 78,
    "ServiceHeaderBlockTitle": "Co-Man sourcing",
    "SubField": "/3/1/",
    "Level": 2,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 79,
    "ServiceHeaderBlockTitle": "Co-Man Vetting",
    "SubField": "/3/2/",
    "Level": 2,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 80,
    "ServiceHeaderBlockTitle": "Line Trail",
    "SubField": "/3/3/",
    "Level": 2,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 81,
    "ServiceHeaderBlockTitle": "Gap Analysis",
    "SubField": "/4/1/",
    "Level": 2,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 82,
    "ServiceHeaderBlockTitle": "HACCP",
    "SubField": "/4/2/",
    "Level": 2,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 84,
    "ServiceHeaderBlockTitle": "Product Development",
    "SubField": "/2/2/",
    "Level": 2,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 59,
    "ServiceHeaderBlockTitle": "Project Charter",
    "SubField": "/1/1/",
    "Level": 2,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 60,
    "ServiceHeaderBlockTitle": "Internal Ideation",
    "SubField": "/1/2/",
    "Level": 2,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 61,
    "ServiceHeaderBlockTitle": "White Space Opportunity",
    "SubField": "/2/1/",
    "Level": 2,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 62,
    "ServiceHeaderBlockTitle": "Territory Mapping/Platform Design",
    "SubField": "/2/1/1/",
    "Level": 3,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 70,
    "ServiceHeaderBlockTitle": "Creative Council Session",
    "SubField": "/2/1/2/",
    "Level": 3,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 71,
    "ServiceHeaderBlockTitle": "Trends Report",
    "SubField": "/2/1/3/",
    "Level": 3,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 85,
    "ServiceHeaderBlockTitle": "Product Development Administration",
    "SubField": "/2/2/1/",
    "Level": 3,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 103,
    "ServiceHeaderBlockTitle": "Brand/Project Immersion",
    "SubField": "/1/1/1/",
    "Level": 3,
    "IsServiceBlock": true,
    "ResourceDescriptionId": 10,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 104,
    "ServiceHeaderBlockTitle": "Project Charter Preparation",
    "SubField": "/1/1/2/",
    "Level": 3,
    "IsServiceBlock": true,
    "ResourceDescriptionId": 23,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 105,
    "ServiceHeaderBlockTitle": "Timeline",
    "SubField": "/1/1/3/",
    "Level": 3,
    "IsServiceBlock": true,
    "ResourceDescriptionId": 23,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 106,
    "ServiceHeaderBlockTitle": "Project Organization-Data Collection",
    "SubField": "/1/1/4/",
    "Level": 3,
    "IsServiceBlock": true,
    "ResourceDescriptionId": 38,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 107,
    "ServiceHeaderBlockTitle": "Brand/Project Immersion",
    "SubField": "/1/2/1/",
    "Level": 3,
    "IsServiceBlock": true,
    "ResourceDescriptionId": 10,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 108,
    "ServiceHeaderBlockTitle": "Meeting-Internal",
    "SubField": "/1/2/2/",
    "Level": 3,
    "IsServiceBlock": true,
    "ResourceDescriptionId": 23,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 109,
    "ServiceHeaderBlockTitle": "Meeting Report",
    "SubField": "/1/2/3/",
    "Level": 3,
    "IsServiceBlock": true,
    "ResourceDescriptionId": 26,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 110,
    "ServiceHeaderBlockTitle": "Brand/Project Immersion",
    "SubField": "/2/1/1/1/",
    "Level": 4,
    "IsServiceBlock": true,
    "ResourceDescriptionId": 10,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 111,
    "ServiceHeaderBlockTitle": "Meeting-Internal",
    "SubField": "/2/1/1/2/",
    "Level": 4,
    "IsServiceBlock": true,
    "ResourceDescriptionId": 10,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 115,
    "ServiceHeaderBlockTitle": "Creative Council Brief",
    "SubField": "/2/1/3/1/",
    "Level": 4,
    "IsServiceBlock": true,
    "ResourceDescriptionId": 10,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 86,
    "ServiceHeaderBlockTitle": "Process Technology Assessment ",
    "SubField": "/2/2/1/1/",
    "Level": 4,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 87,
    "ServiceHeaderBlockTitle": "Analogue Cutting-Internal",
    "SubField": "/2/2/1/2/",
    "Level": 4,
    "IsServiceBlock": false,
    "ResourceDescriptionId": null,
    "IsActive": true
  },
  {
    "ServiceHeaderBlockId": 114,
    "ServiceHeaderBlockTitle": "Development Brief",
    "SubField": "/2/2/1/1/1/",
    "Level": 5,
    "IsServiceBlock": true,
    "ResourceDescriptionId": 10,
    "IsActive": true
  }
]

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

海拔太高太耀眼

暂无简介

文章
评论
29 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

夢野间

文章 0 评论 0

百度③文鱼

文章 0 评论 0

小草泠泠

文章 0 评论 0

zhuwenyan

文章 0 评论 0

weirdo

文章 0 评论 0

坚持沉默

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文