vu3 tsx React is not defined

当在Vue 3中使用TSX时，可能会遇到“React is not defined”错误。这是因为在TSX中使用了React的语法，但是React并没有被定义。解决这个问题的方法是安装`@vitejs/plugin-vue-jsx`插件并在`vite.config.ts`中配置它。

以下是解决问题的步骤：

1. 首先，使用以下命令安装`@vitejs/plugin-vue-jsx`插件：

yarn add '@vitejs/plugin-vue-jsx'

2. 然后，在`vite.config.ts`文件中添加以下内容：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx' // 添加这一句

export default defineConfig({
  plugins: [
    vue(),
    vueJsx() // 添加这一句
  ]
})

3. 最后，重新运行代码即可。

以下是一个使用TSX的Vue 3组件的示例：

import { defineComponent, ref, withModifiers } from 'vue'

export default defineComponent({
  setup() {
    const count = ref(0)

    const handleClick = () => {
      count.value++
    }

    return () => (
      <div onClick={withModifiers(handleClick, ['self'])}>
        {count.value}
      </div>
    )
  }
})