完全映射出未知 "depth" 的对象(以及找到对象 "depth" 的最有效方法)

Fully mapping out object of unknown "depth" (and the most efficient way of finding the "depth" of an object)

我有一个“父”对象,它的子对象“深度”未知。

我的最终目标是能够完全 map 这个深度未知的“父”对象及其所有级别的子级 - 我该怎么做?

如果有帮助,每个子项都已将其“深度”关联为 level 字段。

我假设必须首先找到“父”对象的“深度”(即它包含的最大“级别”)是否正确?最有效的方法是什么?

例如对于下面的对象,“父”对象的最终“深度”为 2。

{
    "title": "parent",
    "level": 0,
    "children": [
        {
            "title": "foo",
            "level": 1,
            "children": [],
        },
        {
            "title": "foo1",
            "level": 1,
            "children": [],
        },
        {
            "title": "foo2",
            "level": 1,
            "children": [
                {
                    "title": "foo3",
                    "level": 2,
                    "children": [],
                }
            ],
        },
    ]
}

我想最终通过 React 中的 map 将其转换为:

<h1>parent</h1>
<h2>foo</h2>
<h2>foo1</h2>
<h2>foo2</h2>
<h3>foo3</h3>

看来我其实不需要知道深度。

我可以根据这个答案递归地映射出这个对象: