[技术] 鲁班H5中 Vue+jsx 的实践

[ly525]

1. staticClass 与 class 多个 类名 并不会生效

new Vue({
  render(h) {
    h('div', {
     // class: "a b c", 也无效
      // staticClass: "a b c", // ⚠️ 注意：这里是无效的，因为babel-vue-jsx 插件会移除空格，显示出来，其实就是 <div class="abc">content</div>
      // 这样配置才能正确显示：<div class="a b c">content</div>
      class: {
        a: true,
        b: true,
        c: true
      }
    }, 'content');
  }
})

2. nativeOn 与 on

new Vue({
  render(h) {
    // tag 如果是保留字(html保留标签)，则用 on，如果是自定义组件的点击，则需要用 nativeOn
    const isReservedTag = (tag) => {}
    h(tag, {
      [isReservedTag(tag) ? 'on' : 'nativeOn']: {
        click: () => {
          
        }
      }
    })
  
  }

})