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 =

{

  'tag': 'div',

  'data': {

    'attrs': {'id': 'div-1'}

  }

  , 'children': [

  {

    'tag': 'div',

    'data': {

      'attrs': {'id': 'div-2'}

    }

    , 'children': [

    {

      'tag': 'div',

      'data': {

        'attrs': {'id': 'div-3'}

      }

      , 'children': []

    }

  ]

  },{

    'tag': 'div',

    'data': {

      'attrs': {'id': 'div-4'}

    }

    , 'children': [

      {

        'tag': 'div',

        'data': {

          'attrs': {'id': 'div-5'}

        }

        , 'children': []

      }

    ]

  }

]

}`

我渲染的时候就直接

<script>

  export default {

    name: "DomCreate",

    render(createElement){

      return createElement(this.list.tag,{...Object.assign(this.list.data)},this.list.children)

    },

    props:{

      list:Object

    }

  }

</script>

这样就可以直接把这个结构渲染出来。

所以你自己写这个递归是出于什么特殊的考虑么？