Vue的render无法渲染children节点

Question

使用Vue的渲染函数渲染html元素，父节点可以渲染出来，子节点却渲染不出来。

组件内：

    <script>

    export default {

      props: {

        renderConfig: {

          type: Object,

          required: true

        }

      },

      data() {

        return {}

      },

      render(h) {

        let ele = this.renderElements(h, this.renderConfig)

        console.log(ele)

        return ele

      },

      methods: {

        renderElements(h, renderConfig) {

          if (!h || !renderConfig) {

            return

          }

    

          if (renderConfig.children && renderConfig.children.length) {

            let children = []

    

            for (let element of renderConfig.children) {

              // 递归查找有子元素的配置并render出vnode

              children.push(this.renderElements(h, element))

            }

            console.log(children)

            return h(

              renderConfig.tag,

              { ...Object.assign(renderConfig.properties) },

              children

            )

          }

    

          return h(renderConfig.tag, { ...Object.assign(renderConfig.properties) })

        }

      }

    }

    </script>

    传给组件的props：

    {

            tag: 'div',

            properties: {

              attrs: { id: 'myDiv', 'data-url': 'www.abc123.com' },

              domProps: { innerHTML: 'Hello, myDiv' },

              on: {

                click: this.handleClick

              }

            },

            children: [

              {

                tag: 'label',

                properties: {

                  attrs: { id: 'myLabel' },

                  domProps: { innerHTML: '输入框： ' }

                }

              },

              {

                tag: 'input',

                properties: {

                  attrs: { id: 'myInput', value: 'hello~~' }

                },

                on: { change: this.handleChange }

              }

            ]

          }

ele的log结果：

两个子vnode的log结果：

DOM的结果：

可以看见在renderElements()里子元素（vnode）是有值的，而到了render(h)之后就消失了，请问是哪里出了错？
鄙人已经看了好久了，实在是看不出来。。。。

Answer 1

你好，请问这个子节点的渲染是出于什么原因考虑自己写了递归？我刚才实验了一下，render 的 createElement的第三个参数可以接受子节点信息。比如我有一个数据结构` let test_div ={&nbsp; 'tag': 'div',&nbsp; 'data': {&nbsp; &nbsp; 'attrs': {'id': 'div-1'}&nbsp; }&nbsp; , 'children': [&nbsp; {&nbsp; &nbsp; 'tag': 'div',&nbsp; &nbsp; 'data': {&nbsp; &nbsp; &nbsp; 'attrs': {'id': 'div-2'}&nbsp; &nbsp; }&nbsp; &nbsp; , 'children': [&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; 'tag': 'div',&nbsp; &nbsp; &nbsp; 'data': {&nbsp; &nbsp; &nbsp; &nbsp; 'attrs': {'id': 'div-3'}&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; , 'children': []&nbsp; &nbsp; }&nbsp; ]&nbsp; },{&nbsp; &nbsp; 'tag': 'div',&nbsp; &nbsp; 'data': {&nbsp; &nbsp; &nbsp; 'attrs': {'id': 'div-4'}&nbsp; &nbsp; }&nbsp; &nbsp; , 'children': [&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; 'tag': 'div',&nbsp; &nbsp; &nbsp; &nbsp; 'data': {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'attrs': {'id': 'div-5'}&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; , 'children': []&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]&nbsp; }]}`我渲染的时候就直接<script>&nbsp; export default {&nbsp; &nbsp; name: "DomCreate",&nbsp; &nbsp; render(createElement){&nbsp; &nbsp; &nbsp; return createElement(this.list.tag,{...Object.assign(this.list.data)},this.list.children)&nbsp; &nbsp; },&nbsp; &nbsp; props:{&nbsp; &nbsp; &nbsp; list:Object&nbsp; &nbsp; }&nbsp; }</script>这样就可以直接把这个结构渲染出来。所以你自己写这个递归是出于什么特殊的考虑么？