vue3 tsx

vue3 setup 的语法糖中 script 的lang=ts 的情况下

使用jsx语法会报错

将lang=ts 改成 lang=tsx 之后运行 报错

按照报错提示 引入React

参考文章

<template>
    <div>
        <a-table :dataSource="dataSource" :columns="data" />
    </div>
</template>
<script lang="tsx" setup>
import { reactive,h, } from "vue"
// import * as vue from 'vue'
// jsx编译出来之后引用了React.createElement
// 在vue中 渲染函数是h 所以将h 赋值给 createElement
const React = { createElement:h,  }
// import * as vue from 'vue'
// const React = { createElement: vue.h, }

// 创建构造函数
class Column {
    // ant a-table  columns 中的pai 参数
    title: string
    dataIndex: string
    key: string
    customRender: any
    constructor(title: string, dataIndex: string, key: string, customRender?: any) {
        this.title = title
        this.dataIndex = dataIndex
        this.key = key
        this.customRender = customRender
    }
}
const open = ({ text, record, index, column }: any): any => {
    record.operation = "删除"
    return (
        <span>{record.operation}</span>
    )
}
// 创建实例
let data = reactive(
    [
        new Column('姓名', 'name', 'name'),
        new Column('年龄', 'age', 'age'),
        new Column('住址', 'address', 'address'),
        new Column('操作', 'operation', 'operation', open),
    ]
)

let dataSource = reactive(
    [
        {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
            operation: "00"
        },
        {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
        },
    ],
)
</script>