Vue SFC中使用JSX需用render函数替代template，依赖@vue/babel-plugin-jsx配置，支持动态组件、插槽透传及TS类型推导。
Vue 单文件组件（SFC）中使用 JSX 编写复杂动态视图，核心是用 render 函数替代 <template>，并借助 JSX 语法提升 JavaScript 表达力。它不是“在 template 里写 JSX”，而是把视图逻辑完全交由 JS 控制——适合条件多变、组件类型动态、嵌套结构灵活的场景。
确保项目支持 JSX
Vue 3 项目需正确安装和配置 JSX 插件：
- 安装插件：
npm install -D @vue/babel-plugin-jsx - 在
babel.config.js中启用（推荐配置）：module.exports = { plugins: [ ["@vue/babel-plugin-jsx", { transformOn: true, optimize: true, enableObjectSlots: true }] ] } - 无需额外引入
h函数 —— Vue 3 的 JSX 会自动注入h和resolveComponent等辅助函数
在 .vue 文件中启用 render + JSX
单文件组件仍保留 <script> 和 <style>，但去掉 <template>，改用 render() 返回 JSX：
- 使用
defineComponent或export default声明组件 -
render()内直接写 JSX，支持三元、map、解构、函数调用等完整 JS 能力 - 示例：根据配置数组动态渲染不同组件
import { defineComponent } from 'vue'
export default defineComponent({
props: {
config: {
type: Array,
default: () => []
}
},
render() {
return (
<div class="dynamic-form">
{this.config.map((item, i) => {
const Comp = resolveComponent(item.component)
return <Comp key={i} {...item.props} />
})}
</div>
)
}
})
处理插槽、事件与属性透传
JSX 中操作插槽和事件更贴近原生 JS 习惯：
立即学习“前端免费学习笔记（深入）”；
- 默认插槽：
{this.$slots.default?.()}；命名插槽：{this.$slots.header?.()} - 事件绑定用驼峰：如
onClick替代@click，onUpdate:modelValue替代v-model - 透传全部 props 和 attrs：
{...this.$props}+{...this.$attrs}（注意排除class和style需手动合并） - 类名可直接用对象或数组：
class={{ active: this.isActive, 'text-lg': true }}
配合 TypeScript 提升可靠性
在 .vue 中使用 JSX 时，TypeScript 能提供精准的 props 类型提示和组件校验：
- 为组件添加
defineComponent包裹，自动推导 props 类型 - 使用
ComponentPublicInstance或自定义接口约束子组件暴露的方法 - 对动态组件名做白名单校验，避免运行时错误（例如用
as const枚举合法组件名） - TSX 文件（
.tsx）可选，但.vue中 JSX 同样享受完整类型支持
