Vue 单文件组件怎么使用 JSX 语法编写复杂动态视图-Vue.js-PHP中文网

vue sfc中使用jsx需用render函数替代template，依赖@vue/babel-plugin-jsx配置，支持动态组件、插槽透传及ts类型推导。

vue 单文件组件怎么使用 jsx 语法编写复杂动态视图

Vue 单文件组件（SFC）中使用 JSX 编写复杂动态视图，核心是用 render 函数替代 <template></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></script> 和 <style></style>，但去掉 <template></template>，改用 render() 返回 JSX：

chartjs-reporter

此技能用于在用户需要将结构化数据（查询结果、CSV 摘要、JSON 记录或 Python 字典/列表）转换为独立的 HTML 页面时使用。

下载

使用 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}"></comp>
        })}
      </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 }}