Question

有关渲染函数的问题-我正在编写一个需要构建树状结构的渲染函数。

即我有一个看起来像这样的数据结构：

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

我需要在屏幕上显示的是一种有效显示此结构（示例中为id）但带有组件的结构

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

createElement（）接受一个子节点数组作为第三个参数。我正在努力的是在创建父组件之后如何将子代添加到节点。

例如，如果我创建这样的顶级菜单组件：

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

，然后创建一个项目，如下所示进入该菜单：

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

然后如何将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/

将子级添加到现有vnode

1 个答案: