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

Posted 2023-02-21

【中文标题】如何通过 VITE 在 Data() Vue 3 组件中使用 JSX/HTML 代码

【英文标题】：How to use JSX/HTML code in Data() Vue 3 components with VITE

【发布时间】：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"

【参考方案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。