使用 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 ://v2.vuejs.org/v2/guide/render-function.html#JSX

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

有任何想法吗？

谢谢

Answer 1

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

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

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

Answer 2

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