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!