如何在 Data() Vue 3 组件中使用 JSX/HTML 代码和 VITE

Question

我正在使用 rollup.js、Vue 3 创建一个设计系统。

我有一个输出数组内容的组件

<template v-for="item, index in testData" :key="index">
  <DsJsx :render="item" />
</template>

测试数据：

data() {
 return {
  testData: [
    {
      testBlock:
      <div>
        <b>Column name 2</b> // <-- html code
      </div>,
    },
  ],
};

},

DsJsx.vue

并且这段代码可以正常工作。

但是当我尝试在 Vite.js 中使用这个组件时，我得到了这个错误。

如何才能在Vite项目中的数据中使用html？

Answer 1

这是 Vue render 函数的无效语法，您确定 DsJsx.vue 显示来自 testBlock 的文本吗？

下面是有效的例子：

测试数据

....
// As string
testBlock: "<div> <b>Column name 2</b> </div>"
....

DsJsx.vue

<script>
export default {
  name: "HelloWorld",
  props: {
    element: String,
  },
  render(h) {
    return h("div", {
      domProps: { innerHTML: this.element }
    });
  },
};
</script>

Answer 2

添加到vite.config.js

import vueJsx from '@vitejs/plugin-vue-jsx';
.....
plugins: [
    vueJsx({}),
],

和lang="jsx"到<script>

如何在 Data() Vue 3 组件中使用 JSX/HTML 代码和 VITE

How to use JSX/HTML code in Data() Vue 3 components with VITE

vue.js

jsx

vite