Добавление детей в существующий vnode

Question

Вопрос о функциях рендеринга - я пишу функцию рендеринга, которая должна построить древовидную структуру.

Т.е. у меня есть структура данных, которая выглядит следующим образом:

{
  "items": [
    {
      "id": "1",
      "children": [
        {
          "id": "11",
          "parentId": "1",
          "children": [
            {
              "id": "111",
              "parentId": "11",
            }
          ]
        },
        {
          "id": "12",
          "parentId": "1",
        }
      ]
    },
    {
      "id": "2",
    }
  ]
}

Мне нужно отобразить на экране структуру, которая эффективно отображает это (идентификатор в примере), но с компонентами

1
|--11
    |--111
|--12
2

createElement () принимает массив дочерних узлов в качестве 3-го аргумента. То, с чем я борюсь, это как добавить потомков к узлу после создания родительского компонента.

Например, если я создаю компонент меню верхнего уровня, такой как:

const myMenu = createElement('menu', {}, [])

а затем впоследствии создайте элемент для go в этом меню следующим образом:

const myMenuItem1 = createElement('menu-item', {}, []);

Как мне тогда go добавить о myMenuItem1 в myMenu?

Я подумал, что это может быть myMenu .children, но, несмотря на передачу пустого массива в качестве дочерних при создании элемента myMenu, свойство children не определено. Чего мне не хватает?

Answer 1

Я думаю, вы где-то допустили ошибку в своих экспериментах. Я проверил это, и vnode.children - пустой массив в таких ситуациях. Это означает, что вы можете просто push ввести другие vnode по мере необходимости:

render(createElement) {
    const VNode1 = createElement('div', {}, [])
    const VNode2 = createElement('h1', {}, 'This is headline')

    VNode1.children.push(VNode2)

    return VNode1
  }

https://jsfiddle.net/ajobi/ernhg364/4/