使用 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我沒有什么可以添加到配置中。 它直接起作用了。