Reactjs 基于深度数据绘制嵌套列表

在React中，如何呈现以下数据

const标题：[
{深度：2，值：“Ayyy”}
{深度：2，值：“Beee”}
{深度：3，值：“Beee One”}
{深度：3，值：“beeetwo”}
{深度：3，值：“Beee Three”}
{深度：2，值：“Ceee”}
];

进入下面的HTML

<ol>
    <li>Ayyy</li>
    <li>
        Beee
        <ol>
            <li>Beee One</li>
            <li>Beee Two</li>
            <li>Beee Three</li>
        </ol>
    </li>
    <li>Ceee</li>
</ol>

哎呀

比伊
比一
比二
比三

Ceee

我的尝试：

const TableOfContents = ({ headings }) => (
    <ol>
        {headings.map(heading => {
            // Depth 2
            if (heading.depth === 2) {
                return (
                    <li>
                        {heading.value}
                    </li>
                )
            }
            // Depth 3
            else if (heading.depth === 3) {
// Depth 3 ???
// If depth === 3 and previousDepth === 2, render <ol><li>{heading.value}</li>
// If depth === 3 and previousDepth === 3, render <li>{heading.value}</li>  
// If depth === 3 and nextDepth === 2, render <li>{heading.value}</li></ol>
            }
        })}
    </ol>
);

consttableofcontents=（{headers}）=>(
{headings.map（heading=>{
//深度2
如果（heading.depth==2）{
返回(

{heading.value}

)
}
//深度3
否则如果（heading.depth==3）{
//深度3？？？
//如果depth==3和previousDepth==2，则渲染
{heading.value}
//如果depth==3和previousDepth==3，则渲染
{heading.value}
//如果depth==3，nextDepth==2，则渲染
{heading.value}
}
})}
);

您需要另一个值，它是该项的父项。您必须定义项的父项，以便嵌套它。

您可以先更改数据结构，如下所示：

const headings: [
    {depth: 2, value: "Ayyy"},
    {depth: 2, value: "Beee", children: [
        {depth: 3, value: "Beee One"}
        {depth: 3, value: "Beee Two"}
        {depth: 3, value: "Beee Three"}
    ]},
    {depth: 2, value: "Ceee"}
];

您可以编写jsx渲染函数，如下所示：

const TableOfContents = ({ headings }) => (
    <ol>
        {headings.map(heading => {
                return (
                    <li>
                        {heading.value}
                        if (heading.children) {
                            <ol>
                                heading.children.map(child => <li>{child.value}</li>
                            </ol>
                        }
                    </li>
                )
        })}
    </ol>
);

consttableofcontents=（{headers}）=>(
{headings.map（heading=>{
返回(

{heading.value}
if（标题.儿童）{
heading.children.map（child=>
{child.value}
}

)
})}
);

---

希望有帮助。

您应该先这样更改标题数据结构。

常量标题：[{depth:2，value:Ayyy}，{depth:2，value:Beee]，子项：[{depth:3，value:Beee One}，{depth:3，value:Beee Two}，{depth:2，value:Ceee}]；