Error in render: "ReferenceError: h is not defined"

代码如下： computed: { columns: function () { let columns = []; switch (this.tab) { case "1": return [ { label: "name", prop: "name", width: 260, }, { label: "gender", prop: "gender", formatter: (row, column, cellValue, index) => { const value = cellValue && ["男", "女"][cellValue]; const stateClass = [ "status_error", "status_success", ][cellValue]; return ( <span class={status_success}>{value}</span> ); }, }, ]; break; default: columns = [ { label: "company", prop: "company", width: 260, }, { label: "status ", prop: "status", formatter: (row, column, cellValue, index) => { const value = cellValue && ["经营中", "已关闭"][cellValue]; const stateClass = [ "status_success", "status_warning" ][cellValue]; return <span class={stateClass}>{value}</span>; }, }, ]; break; } return columns; }, }, h未定义？h是啥？其实就是createElement函数的别名，具体可以看这里：vue中render: h => h(App)的理解。 另外一个页面columns formatter也是这么写的，没问题呀。 等下，不能createElement？是不是this没有绑定上？果然，在<span>标签的时候就报错了。 对比了另一个正确展示的页面，发现columns是写在data里的，而这组件columns需要根据props动态生成，就写在computed里面了。难道是这个影响了？提到data里试一下吧。 一试真的吓一跳，oooooook了，页面展示正确了！！！！！ 后来终于找到了原因：data是成员函数，所以会把h注入，而像methods,computed这些都只是对象，不会注入h。具体解释见：ReferenceError: h is not defined。 h is not defined 但是,如果vue用的是3.4以上的版本(本项目中用的是2.6.12)，我一开始的写法就没问题，因为method and getter 已经自动注入h了。详情见 h-auto-injection。

本文章由javascript技术分享原创和收集