鍍金池/ 問(wèn)答/網(wǎng)絡(luò)安全  HTML/ Vue的render無(wú)法渲染children節(jié)點(diǎn)

Vue的render無(wú)法渲染children節(jié)點(diǎn)

使用Vue的渲染函數(shù)渲染html元素,父節(jié)點(diǎn)可以渲染出來(lái),子節(jié)點(diǎn)卻渲染不出來(lái)。

組件內(nèi):
    <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結(jié)果:
圖片描述
兩個(gè)子vnode的log結(jié)果:
圖片描述
圖片描述
DOM的結(jié)果:
圖片描述
可以看見(jiàn)在renderElements()里子元素(vnode)是有值的,而到了render(h)之后就消失了,請(qǐng)問(wèn)是哪里出了錯(cuò)?
鄙人已經(jīng)看了好久了,實(shí)在是看不出來(lái)。。。。

回答
編輯回答
獨(dú)特范

改下這里domProps: { innerHTML: 'Hello, myDiv' }試試,可能是因?yàn)閕nnerHTML把子組件覆蓋了

2017年8月10日 13:04