uni-app vue3编译到微信小程序报错

// 我在设置里面选了vue3版本其他没问题就是使用不了jsx export default { setup() { const msg = ref(123); const change = param => { console.log(param); msg.value ; }; const dianWo = <button type="primary" onTap={change}>点我</button>

return () => ( <view class="index">
<view onTap={change.bind(null, 221)}>{msg.value}</view>
<button type="primary" onTap={change}> {obj.zxc?.length} </button>
{dianWo}
</view> ); } };

更多关于uni-app vue3编译到微信小程序报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

wuwangju 1楼

更多关于uni-app vue3编译到微信小程序报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

在 uni-app Vue3 中使用 JSX 需要正确配置。你的代码有几个问题：

缺少 JSX 导入：需要在 setup() 中正确导入 h 函数
语法问题：JSX 事件绑定和模板语法混用

修改后的代码：

import { ref, h } from 'vue'

export default {
  setup() {
    const msg = ref(123)
    const obj = ref({ zxc: [] })
    
    const change = (param) => {
      console.log(param)
      msg.value++
    }
    
    // JSX 组件需要返回渲染函数
    return () => h('view', { class: 'index' }, [
      h('view', { 
        onClick: () => change(221) 
      }, msg.value),
      h('button', { 
        type: 'primary',
        onClick: change 
      }, obj.value.zxc?.length || 0),
      h('button', {
        type: 'primary',
        onClick: change
      }, '点我')
    ])
  }
}

或者使用 @vue/babel-plugin-jsx 配置：

安装依赖：

npm install @vue/babel-plugin-jsx -D

在 babel.config.js 中配置：

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: ['@vue/babel-plugin-jsx']
}

使用 JSX 语法：

import { ref } from 'vue'

export default {
  setup() {
    const msg = ref(123)
    const obj = ref({ zxc: [] })
    
    const change = (param) => {
      console.log(param)
      msg.value++
    }
    
    const dianWo = <button type="primary" onClick={change}>点我</button>
    
    return () => (
      <view class="index">
        <view onClick={() => change(221)}>{msg.value}</view>
        <button type="primary" onClick={change}>
          {obj.value.zxc?.length || 0}
        </button>
        {dianWo}
      </view>
    )
  }
}