vue3 .jsx文件

Vue 3支持使用JSX编写组件，JSX是一种JavaScript语法扩展，它允许我们在JavaScript中编写类似HTML的代码。下面是一个简单的Vue 3 JSX组件的例子：

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  props: {
    msg: String
  },
  setup(props) {
    return () => (
      <div>
        <h1>{props.msg}</h1>
        <p>This is a JSX component!</p>
      </div>
    );
  }
});

在这个例子中，我们使用`defineComponent`函数定义了一个名为`MyComponent`的组件。`props`属性定义了一个名为`msg`的字符串类型的属性。`setup`函数返回一个函数，这个函数返回了一个JSX元素，其中包含了一个`<h1>`标签和一个`<p>`标签，`<h1>`标签中显示了`props.msg`的值。

需要注意的是，在Vue 3中，`setup`函数是组件的入口点，它返回一个渲染函数，这个渲染函数返回一个JSX元素。另外，由于JSX是JavaScript语法扩展，因此需要使用Babel等工具将JSX转换为普通的JavaScript代码。