如何在 vue3 的 vue 文件中使用 jsx 语法

Question

例如，我想在Hello.vue中使用这些代码：

<template>
  <RenderComponent :data="hello" />
</template>

<script>
import { ref, computed, defineComponent } from 'vue'

export default defineComponent({
  name: 'CustomComponent',

  setup() {
    const name = ref('Lily')

    const hello = computed(() => {
      return <span>Hello {name}!</span>;
    }) 
    return {
       hello
    }
  }
})
</script>

但 IDE 会抛出类似“无法解析源以进行导入分析，因为内容包含无效的 JS 语法”这样的错误。

我已经安装了@vitejs/plugin-vue-jsx和@vue/babel-plugin-jsx，可以成功使用*.jsx文件了。

我该怎么办？

Answer 1

你应该在名为Hello.jsx的文件中使用jsx而不使用template和script标签，并且不要从属性返回jsx并返回函数()=>来渲染jsx，下面的例子应该工作：

import { ref, computed, defineComponent } from 'vue'

export default defineComponent({
  name: 'CustomComponent',

  setup() {
    const name = ref('Lily')

    const hello = computed(() => {
      return `Hello ${name.value}!`;
    }) 
    return ()=><RenderComponent data={hello} />
  }
})