如何通过 VITE 在 Data() Vue 3 组件中使用 JSX/HTML 代码答案

【问题标题】：How to use JSX/HTML code in Data() Vue 3 components with VITE如何通过 VITE 在 Data() Vue 3 组件中使用 JSX/HTML 代码
【发布时间】：2022-01-16 18:20:15
【问题描述】：

我正在使用 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？

【问题讨论】：

这个语法错误：v-for="item, index in testData"应该是v-for="(item, index) in testData"

标签： vue.js jsx vite

【解决方案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>

【讨论】：

是的，我确定。屏幕显示了 DsJsx 在这种情况下得到了什么 ibb.co/6B2s3V9
无论如何，你可以试试可能的例子吗？

【解决方案2】：

添加到 vite.config.js

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

和lang="jsx" 到<script>

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。