ReferenceError: h is not defined

暨 vue 中使用模板(如ant中使用的)

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "ReferenceError: h is not defined"

found in

---> <TableCell>
       <BodyRow>
         <TableRow>
           <ConnectTableRow>

==解决==

灵感来源: [](https://github.com/elbywan/bo...

<script>
    export default {
        ...
        // h gets auto injected here (note that data is now a member function)
        data() {
            return {
                selection: [],
                model: [
                    { label: "One" },
                    { label: "Two" },
                    { label: "Three", list: [
                        { label: "Four" },
                        { label: "Five" }
                    ] }
                ],
                category: "list",
                // Move 'display' here
                display: item => <strong>item.label</strong>
            }
        }
    }
</script>

看这个这行注释:

h gets auto injected here (note that data is now a member function),

那就是说, vue 文件的方法, 就会自动收到 babel 注入 h 了?(h 是什么? 这是 JSX 的约定, 默认会自动注入到方法的第一个参数: ue JSX assumes that you pass h` as the first parameter of your render function.
It will use h to dynamically create all your components. `)

上述错误时, 我的JSX模板配置是另起config.js文件中, 在vue中 import xxx from './config.js 的, 这就是说, 很可能是因为这种方式, vue等框架没有给我的配置增强, 导致方法没有注入`h' .

那, 我将我的配置挪到 data(){return {xx: Jsx模板配置}} 中试试.

果然. oooooooooooook!