Vue render函数 深度遍历组件树 怎么写？我写的获取不到第2层子组件

Question

// 组件树
{
  tag: 'div',
  data: {},
  children: [
    {
      tag: 'el-form',
      data: {
        props: {
          form: store.state.paramsData,
          inline: true,
          labelWidth: "120px",
          labelPosition: "right"
        }
      },
      children: [
        {
          tag: 'el-form-item',
          data: {
            attrs: {
              label: '姓名',
              labelWidth: "70px",
            }
          },
          children: [
            {
              tag: 'el-input',
              data: {
                attrs: {
                  placeholder: '请输入姓名'
                },
                props: {
                  value: store.state.paramsData.name
                },
                children: null
              }
            }
          ]
        }
      ]
    },
    {
      tag: 'filter-submit',
      data: {
      },
      children: null
    },
    {
      tag: 'el-input',
      data: {
        attrs: {
          value: '组件2'
        }
      },
      children: null
    },
    {
      tag: 'el-input',
      data: {
        'v-model': 'this.form.name'
      },
      children: null
    }
  ]
}

// render 方法
render (h) {
  const deepTraversalToVNode = (node) => {
    let vNodeChildren = []
    if (node.children != null) {
      const children = node.children;
      for (let i = 0; i < children.length; i++) {
        vNodeChildren.push(
          h(
            children[i].tag,
            children[i].data,
            children[i].text ? children[i].text : deepTraversalToVNode(children[i])
          )
        )
      }
    }
    return h(node.tag, node.data, vNodeChildren)
  }
  let tpl = deepTraversalToVNode(vNode)
  return tpl
}

遍历出来的tpl长这样, 第1层chilren 子组件都是null 是什么地方写的不对吗？

Answer 1

这样写可以渲染出来了。。 不知道是不是最正确的写法

render (h) {
  const deepTraversalToVNode = (node) => {
    let vNodeChildren = []
    if (node.children != null && node.children.push) {
      return h(
        node.tag,
        node.data,
        node.children.map(item => {
          return deepTraversalToVNode(item)
        }),
        node.text
      )
    } else {
      return h(node.tag, node.data, null, node.text)
    }
  }

  let tpl = deepTraversalToVNode(JSON.parse(JSON.stringify(vNode)))
  
  return tpl
},