m***@163.com
m***@163.com
  • 发布:2023-05-19 08:40
  • 更新:2023-05-19 09:53
  • 阅读:384

【报Bug】vue3+uniapp,setup中写render函数报错

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win11

HBuilderX类型: 正式

HBuilderX版本号: 3.8.2

第三方开发者工具版本号: stable1.06

基础库版本号: vue3

项目创建方式: HBuilderX

示例代码:
<script name="BpmTaskIndex">  
import { ref, computed, defineComponent, h } from 'vue'  
import UniSegmentedControl from '@/uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue'  
import MyBpmTask from './MyBpmTask.vue'  
import ToDoBpmTask from './ToDoBpmTask.vue'  
import DoneBpmTask from './DoneBpmTask.vue'  

const ITEMS = ['我的任务', '待办任务', '已办任务']  
const TASK_COMPS = [MyBpmTask, ToDoBpmTask, DoneBpmTask]  

export default defineComponent({  
  setup() {  
    const current = ref(0)  
    const CurComp = computed(() => TASK_COMPS[current.value])  
    function switchItem(e) {  
      current.value = e.currentIndex  
    }  

    return () => h(  
      UniSegmentedControl,  
      {  
        attrs: {  
          class: 'bpm-task-index'  
        },  
        props: {  
          styleType: 'button',  
          current: current.value,  
          values: ITEMS  
        },  
        onClickItem: switchItem  
      },  
      [CurComp.value]  
    )  
  }  
})  
</script>

操作步骤:

复制代码,创建 MyBpmTask 和 ToDoBpmTask 和 DoneBpmTask ,这三个内容随意

预期结果:

顺利渲染出 MyBpmTask 和 ToDoBpmTask 和 DoneBpmTask 其中的一个

实际结果:

报错:
vendor.js? [sm]:3141 TypeError: str.replace is not a function
at vendor.js? [sm]:142
at vendor.js? [sm]:134
at Object.h$1 [as h] (vendor.js? [sm]:6293)
at Proxy.<anonymous> (index.js? [sm]:16)
at renderComponentRoot (vendor.js? [sm]:5758)
at ReactiveEffect.componentUpdateFn [as fn] (vendor.js? [sm]:5842)
at ReactiveEffect.run (vendor.js? [sm]:1978)
at setupRenderEffect (vendor.js? [sm]:5892)
at mountComponent (vendor.js? [sm]:5730)
at createComponent3 (vendor.js? [sm]:5943)(env: Windows,mp,1.06.2303220; lib: 2.32.0)

bug描述:

编译目标:微信小程序;
运行到小程序模拟器之后报错,错误内容请查看附件

vendor.js? [sm]:3141 TypeError: str.replace is not a function
at vendor.js? [sm]:142
at vendor.js? [sm]:134
at Object.h$1 [as h] (vendor.js? [sm]:6293)
at Proxy.<anonymous> (index.js? [sm]:16)
at renderComponentRoot (vendor.js? [sm]:5758)
at ReactiveEffect.componentUpdateFn [as fn] (vendor.js? [sm]:5842)
at ReactiveEffect.run (vendor.js? [sm]:1978)
at setupRenderEffect (vendor.js? [sm]:5892)
at mountComponent (vendor.js? [sm]:5730)
at createComponent3 (vendor.js? [sm]:5943)(env: Windows,mp,1.06.2303220; lib: 2.32.0)

示例代码:

<script name="BpmTaskIndex">  
import { ref, computed, defineComponent, h } from 'vue'  
import UniSegmentedControl from '@/uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue'  
import MyBpmTask from './MyBpmTask.vue'  
import ToDoBpmTask from './ToDoBpmTask.vue'  
import DoneBpmTask from './DoneBpmTask.vue'  

const ITEMS = ['我的任务', '待办任务', '已办任务']  
const TASK_COMPS = [MyBpmTask, ToDoBpmTask, DoneBpmTask]  

export default defineComponent({  
  setup() {  
    const current = ref(0)  
    const CurComp = computed(() => TASK_COMPS[current.value])  
    function switchItem(e) {  
      current.value = e.currentIndex  
    }  

    return () => h(  
      UniSegmentedControl,  
      {  
        attrs: {  
          class: 'bpm-task-index'  
        },  
        props: {  
          styleType: 'button',  
          current: current.value,  
          values: ITEMS  
        },  
        onClickItem: switchItem  
      },  
      [CurComp.value]  
    )  
  }  
})  
</script>
2023-05-19 08:40 负责人:无 分享
已邀请:
Diligent_UI

Diligent_UI - 【插件开发】【专治疑难杂症】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群:120594820,代表作灵感实用工具小程序

小程序端不支持jsx语法

  • m***@163.com (作者)

    这不是jsx,就是普通的render函数,render函数也不支持吗?

    2023-05-19 14:06

  • Diligent_UI

    回复 m***@163.com: 看到你的实例代码里面是jsx,h函数

    2023-05-19 14:07

  • m***@163.com (作者)

    回复 Diligent_UI: jsx/tsx 的话,render函数里需要写尖括号+标签,类似<Tag />这种

    2023-05-23 15:03

该问题目前已经被锁定, 无法添加新回复