vue項目中 render函數直接操作html元素報錯

vue文件中，寫法如下，會報語法錯誤

render(h, context) {
    const { icon, title } = context.props
    const vnodes = []

    if (icon) {
      vnodes.push(<i class={icon}/>)
    }

    if (title) {
      vnodes.push(<span slot='title'>{(title)}</span>)
    }
    return vnodes
  }

兩種解決方案

方案一：直接修改Vue文件的語法使用更可識別的語法 https://cn.vuejs.org/v2/guide/render-function.html

在vue render渲染函數里面是通過createElement實現的，使用如下寫法更規范化

render: function(createElement, context) {
    const vnodes = []
    const { icon, title } = context.props
    if (icon) {
      const elHtml = createElement('i', {
        attrs: {
          'class': icon
        }
      })
      console.log(elHtml)
      vnodes.push(elHtml)
    }

    if (title) {
      const elHtml = createElement('span', {
        attrs: {
          slot: title
        }
      }, title)
      console.log(elHtml)
      vnodes.push(elHtml)
    }
    return vnodes
  }

 

方案二：利用babel引入語法字典

具體在根路徑配置文件 告訴是vue語法字典，避免js不識別vue語法而報錯；在根目錄里添加babel.config.js文件，注意需要安裝babel相關插件

module.exports = {
  presets: ["@vue/app"]
};

請參考官網：https://cli.vuejs.org/guide/browser-compatibility.html#polyfills

babel相關內容可以參考：https://www.jiangruitao.com/docs/babel/rudiments/quick-start/  講解的很明了；

若具體的說法有誤請路過的大神指點！