Vue3使用JSX时h函数报错及渲染异常问题求助

先拆解你遇到的两个问题：

第一个问题：为什么会报"h is not a function"？ #

你踩了Vue的命名冲突坑！你把组件的name设成了"ref"，而Vue本身有内置的ref API（不管是Vue2还是Vue3），这个命名冲突会导致作用域内的变量混乱，直接让render函数里的h参数无法被正常识别，所以才抛出了这个错误。

第二个问题：为什么返回函数会显示字符串？ #

Vue的render函数要求必须直接返回VNode节点（也就是h()调用的结果），而你改成返回一个函数后，Vue会把这个函数当成普通的JavaScript值处理，直接转换成字符串显示在页面上，这就是你看到那段函数代码的原因——这个写法完全不符合render函数的规则。

正确的解决步骤： #

1. 修改组件名称，规避命名冲突
   把组件name改成和Vue内置API不重复的名字，比如"MyRefComponent"：

   <script>
   export default {
     name: "MyRefComponent", // 这里必须改名字！
     props: {
       msg: String,
     },
     render(h) {
       // 注意："tag"不是合法HTML标签，改成实际存在的标签比如div/span
       return h("div", {}, ["123"]);
     },
   };
   </script>
   

2. 确保render函数直接返回VNode
   不要返回函数，直接调用h()并返回它的结果即可。另外注意你之前写的"tag"是无效HTML标签，浏览器无法识别，建议换成实际存在的标签（比如div、p），否则会渲染出未知的<tag>元素。

额外优化（如果是Vue3环境）： #

如果你用的是Vue3的选项式API，也可以直接导入全局的h（即createVNode），这样能彻底避免参数传递的潜在问题：

<script>
import { h } from 'vue';

export default {
  name: "MyRefComponent",
  props: {
    msg: String,
  },
  render() { // 不用再接收h参数，直接用导入的h
    return h("div", {}, ["123"]);
  },
};
</script>

这样修改后，组件就能正常渲染出<div>123</div>元素了。

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