vue jsx语法 如何在 js 中使用 h 函数?

Question

• 场景

我在 index.js 中配置了一个插槽

export const slots = {
  prefix: () => {
    return <i class='el-icon-edit'></i>
  }
}

index.vue

import {slots} from './index.js'
export default {
  render() {
    return (
      <el-select>
        {
          <template slot="prefix">
              slots.prefix()
          </template>
        }
      </el-select>
    )
  }
}

报错如下
ReferenceError: h is not defined

请教大佬们 怎么解决这个问题~

Answer 1

https://v2.cn.vuejs.org/v2/gu...

Answer 2

- render() {
+ render(h) {

Answer 3

怀疑 js 文件中的组件没被 babel-preset-jsx 转化
你直接在index.vue 的 render 中写一个 prefix 组件试试能不能生效

export default {
  render() {
    const prefix = () => (<i class='el-icon-edit'></i>)
    return (
      <el-select>
        {
          <template slot="prefix">
              <prefix />
          </template>
        }
      </el-select>
    )
  }
}

Answer 4

实测有效
index.js

export const slots = {
  // 这里的h函数，eslint会报提示，因为这个h下边我们没有使用，加上下面这行注释就好了
  // eslint-disable-next-line
  prefix: (h) => {
    return <i class='el-icon-edit'></i>
  }
}

index.vue

import {slots} from './index.js'
export default {
  render(h) {
    return (
      <el-select>
        {
          <template slot="prefix">
              slots.prefix(h)
          </template>
        }
      </el-select>
    )
  }
}