使用 JSX 和渲染函数重写 VueJS 组件

Question

我有以下 VueJS 组件：

Vue.component('label-ui', {
    props: ['type', 'size', 'color', 'position'],

    template: `
        <div :class="[type, size, color, position]" class="ui labels">
            <slot></slot>
        </div>
    `

我想重写它，以便我可以动态设置模板的 html 标记 - 类似于我对这段代码所做的：

  props: ['tag', 'attributes'],
  render(createElement) {
    return createElement(this.tag || 'div', {attrs: this.attributes || {}}, this.$slots.default);
  }

但是，我想使用 JSX 语法 - 如此处所述：https://vuejs.org/v2/guide/render-function.html#JSX

不过，我不知道如何使用 JSX 格式来做到这一点。

有什么想法吗？

谢谢

Answer 1

只需安装babel-plugin-transform-vue-jsx 我没有什么可以添加到配置中。它直接起作用。

Answer 2

听起来你的 Webpack 并没有为转译设置正确的 babel 插件。

浏览器本身不支持 JSX，像 Webpack 这样的模块捆绑器会将浏览器不理解的 JSX 转换（从 JSX 转换为 Javascript）到浏览器可以理解的格式.

这将是您需要采取的第一步，并且可能是您所缺少的。