Vue2 JSX提取公共模板至独立JS文件时h函数未定义怎么解决？

错误原因 #

独立JS文件不会自动注入Vue的h渲染函数，而JSX在编译时会被转换为h函数的调用，因此直接使用会出现未定义错误。

解决方案 #

1. 在独立JS文件中手动引入h函数 #

根据Vue版本选择导入方式：

Vue 2 版本

import Vue from 'vue'
const h = Vue.h // 或使用 Vue.createElement

Vue 3 版本

import { h } from 'vue'

2. 编写可复用的JSX函数组件 #

将提取的模板封装为函数，所有依赖的变量、方法都通过参数传入（避免使用this，因为独立文件中this并非Vue实例）：

示例文件 OptionContent.js：

// Vue 2 导入h
import Vue from 'vue'
const h = Vue.h

// Vue 3 请替换为 import { h } from 'vue'

export default function OptionContent(props) {
  const { item, optionActiveVal, updateActiveOptionValue, isActive, variablesModules, conf, index } = props
  
  return (
    <>
      <svg-icon name='sort-operator' class='item-option-drag sort-operator-position' />
      <div class='flex-container'>
        <ContentEditableArea
          vModel={item.label}
          contenteditable={item.value !== variablesModules.optionComponentVariables.SPECIALOPTIONS.other.value}
          class={optionActiveVal === item.value ? 'option-content-editable-active contenteditable' : 'contenteditable'}
          vOn:contenteditable-toggle={status => updateActiveOptionValue(status, item.value)}
          ref={`option-${item.value}`}
        />
        {isActive ? (
          <svg-button class="svg-buttom-option-delete" name='option-delete' vOn:click_native={() => conf.__slot__.options.splice(index, 1)} />
        ) : ''}
      </div>
    </>
  )
}

3. 在.vue文件中导入并使用组件 #

将依赖的变量、方法通过props传递给独立组件：

import OptionContent from './OptionContent.js'

// 原el-radio内的模板替换为：
<el-radio disabled label={item.label} border={conf.border} key={item.value} class="option-draggable">
  <OptionContent
    item={item}
    optionActiveVal={this.optionActiveVal}
    updateActiveOptionValue={updateActiveOptionValue.bind(this)}
    isActive={this.isActive}
    variablesModules={this.$variablesModules}
    conf={conf}
    index={index}
  />
</el-radio>

注意事项 #

• 确保svg-icon、ContentEditableArea、svg-button等组件已全局注册，或在独立JS文件中单独导入
• Vue 2项目需配置JSX编译支持（如使用@vue/babel-preset-jsx）
• 所有依赖的Vue实例属性、方法均通过props传递，避免在独立函数中依赖this

内容的提问来源于stack exchange，提问作者haotian zeng