uniapp vue3 jsx代码渲染如何实现

在uniapp中使用vue3的jsx语法进行代码渲染时遇到问题，具体应该如何实现？我尝试按照官方文档配置但组件无法正常渲染，是否有完整的示例代码可以参考？需要注意哪些关键配置点？

2 回复

在uniapp的vue3中使用jsx渲染，直接在setup函数中返回即可：

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    return () => (
      <view>
        <text>计数：{count.value}</text>
        <button onClick={() => count.value++}>+1</button>
      </view>
    )
  }
}

需要配置babel支持jsx，安装@vue/babel-plugin-jsx插件。


在 UniApp 中使用 Vue 3 和 JSX 渲染组件，需要配置和编写 JSX 代码。以下是实现步骤和示例：

1. 环境配置

  • 确保项目基于 Vue 3（如使用 vue-cli 创建时选择 Vue 3 模板）。
  • 安装 JSX 支持依赖：
    npm install @vue/babel-plugin-jsx -D
  • 在 babel.config.js 中配置插件：
    module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: ["@vue/babel-plugin-jsx"]
};

2. 编写 JSX 组件

在 .vue 文件或单独 JS/JSX 文件中使用 JSX 语法：

// 示例：HelloWorld.jsx
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const message = "Hello, UniApp with JSX!";
    return () => (
      <view class="container">
        <text>{message}</text>
        <button onClick={() => console.log('Clicked')}>点击</button>
      </view>
    );
  }
});

3. 在页面中使用

在 Vue 页面中导入并渲染 JSX 组件：

<template>
  <view>
    <HelloWorld />
  </view>
</template>

<script setup>
import HelloWorld from './HelloWorld.jsx';
</script>

注意事项：

  • 事件处理：使用 onClick 等小驼峰命名（与 Vue 模板的 @click 不同）。
  • 样式类：用 class 代替 className（与 React 区分）。
  • UniApp 组件：直接使用 <view>、<text> 等内置组件，确保符合 UniApp 规范。

完整示例代码：

// HelloWorld.jsx
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);
    const increment = () => count.value++;

    return () => (
      <view class="card">
        <text>计数: {count.value}</text>
        <button onClick={increment}>增加</button>
      </view>
    );
  }
});

通过以上步骤，即可在 UniApp Vue 3 项目中实现 JSX 渲染。

回到顶部