vite+vue3.0 jsx (tsx) 踩坑报错ReferenceError: React is not defined

官方文档让我们配置babel.config.js，如果我们使用vite快速搭建的项目，那么就很遗憾不行，要换一种配置

 1. yarn add '@vitejs/plugin-vue-jsx'
 2. 配置vite.config.ts

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

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

然后再跑代码就ok了，下面是使用列子

// 一个组件
import {
    
     withModifiers, defineComponent, ref } from "vue";

const App = defineComponent({
    
    
  setup() {
    
    
    const count = ref(6);

    const inc = () => {
    
    
      count.value++
    };

    return () => (
      <div onClick={
    
    withModifiers(inc, ["self"])}>{
    
    count.value}</div>
    );
  },
});

export default App