Отображение вложенного списка на основе данных глубины

Question

В React, как я могу отобразить следующие данные

const headings: [
    {depth: 2, value: "Ayyy"}
    {depth: 2, value: "Beee"}
        {depth: 3, value: "Beee One"}
        {depth: 3, value: "Beee Two"}
        {depth: 3, value: "Beee Three"}
    {depth: 2, value: "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>

Моя попытка:

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>
);

Answer 1

Сначала вы можете изменить структуру данных следующим образом:

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>
);

Надеюсь, это поможет.

Answer 2

вам понадобится другое значение, которое является родительским для элемента. Вы должны определить родителя элемента, чтобы вы могли его вложить.