tsx语法

vue3_tsx语法

// 1、插件安装
npm install @vitejs/plugin-vue-jsx -D

// 2、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()]
})

// 3、tsconfig.json配置
compilerOptions中添加如下：
 "jsx": "preserve",
 "jsxFactory": "h",
 "jsxFragmentFactory": "Fragment",


// 4. index.tsx
```js
import { reactive, ref } from 'vue'
const v = ref<string>('jsxbox')
const list = reactive<number[]>([1, 2, 3, 4, 5])
function handleClick(number: number) {
  console.log(number)
}
type Props = {
  msg: string
}

export default (props: Props, ctx: any) => {
  return (
    <div class={v.value}>
      <div class={'title'}>{props.msg}</div>
      {console.log(ctx)} // const {attrs, emit, slots} = ctx
      <ul>
        {list.map((item, index) => (
          <li onClick={handleClick.bind(this, item)} key={index}>第{item}条数据</li>
        ))}
      </ul>
    </div>
  )
}