数据结构转换dom节点_antd tree 自定义dom-优快云博客

本文链接：https://blog.youkuaiyun.com/SASAEDFDASF/article/details/125517289

本文解析如何使用JavaScript动态渲染树状数据结构，通过递归函数实现A-4层级的DOM操作，展示从数据到视图的转换过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//数据
const treeData = [
{“name”: “A-1”},
{“name”: “A-2”},
{“name”: “A-3”},
{
“name”: “A-4”,
“sub”: [
{“name”: “A-4-1”},
{“name”: “A-4-2”},
{
“name”: “A-4-3”,
“sub”: [
{“name”: “A-4-3-1”},
{“name”: “A-4-3-2”}
]
}
]
}
…
];

//dom结构

  <div class="A-1"></div>   // <div class="A-2"></div>   // <divclass="A-3"></div> <div class="A-4">
    <div class="A-4-1">
    <div class="A-4-2">
    <div class="A-4-3">
        <div class="A-4-2-1"></div>
        <div class="A-4-3-2"></div>
    </div> </div>

…
解决办法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        const treeData = [
            { "name": "A-1" },
            {
                "name": "A-2",
                "sub": [
                    { "name": "A-2-1" },
                    { "name": "A-2-2" },
                    {
                        "name": "A-2-3",
                        "sub": [
                            { "name": "A-2-3-1" },
                            { "name": "A-2-3-2" }
                        ]
                    }
                ]
            },
            { "name": "A-3" },
            {
                "name": "A-4",
                "sub": [
                    { "name": "A-4-1" },
                    { "name": "A-4-2" },
                    {
                        "name": "A-4-3",
                        "sub": [
                            { "name": "A-4-3-1" },
                            { "name": "A-4-3-2" }
                        ]
                    }
                ]
            }
        ]
        function render(tree) {
            var arr = tree.map((item) => {
                let dom = null
                dom = document.createElement('div')
                dom.className = item.name
                if (item.sub !== undefined) {
                    var a = render(item.sub)
                    a.forEach(element => {
                       dom.appendChild(element)
                    });
                }
                return dom
            })
            return arr
        }
        console.log(render(treeData)[1])
    </script>
</body>

</html>