uni-app jsx支持

发布于 1周前 作者 eggper 来自 Uni-App

uni-app jsx支持

<script type="text/jsx">  
export default {  
  render(createElement) {  
   return this.show && (<div>sample</div>)  
 }  
}  
</script>
Harmonyos Next教程
2 回复

就算不用特别的支持，加注释这种基本的，要处理下。 现在加注释 Ctl+shift+C ，直接给我按HTML注释加了。


在uni-app中，虽然默认使用Vue模板语法进行开发，但你也可以通过配置来支持JSX语法。JSX允许你在JavaScript代码中直接编写HTML结构，对于喜欢React风格开发的开发者来说，这可能是一个更熟悉和舒适的写法。

要在uni-app中启用JSX支持，你需要进行一些配置。以下是一个简单的步骤和示例代码，展示如何在uni-app项目中集成和使用JSX。

1. 安装Babel及相关插件

首先，确保你的项目已经安装了Babel，并且你需要安装一些Babel插件来支持JSX语法。

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime @babel/runtime

2. 配置Babel

在项目根目录下创建或修改.babelrc文件，添加以下配置：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

3. 修改webpack配置（如果使用HBuilderX则跳过）

如果你不是使用HBuilderX进行开发，而是自己配置了webpack，你需要确保webpack能够处理JSX文件。这通常涉及到修改webpack.config.js，添加对.jsx和.tsx文件的处理。

由于uni-app默认使用Vite或内置的构建系统，如果你使用HBuilderX，这一步可以跳过。

4. 编写JSX代码

现在，你可以在你的uni-app项目中编写JSX代码了。例如，你可以创建一个新的.jsx文件，并编写如下代码：

import React from 'react';
import { View, Text } from '@tarojs/components'; // 根据你的实际情况调整

const MyComponent = () => {
  return (
    <View>
      <Text>Hello, JSX in uni-app!</Text>
    </View>
  );
};

export default MyComponent;

注意：uni-app默认使用的是Vue组件，所以这里的@tarojs/components应该替换为uni-app对应的组件库，但由于uni-app原生不支持React，你可能需要一些桥接库或自定义封装来使React组件在uni-app中工作。实际项目中，更常见的做法是使用类似于@vue/babel-preset-jsx的插件来在Vue中写JSX。

总结

虽然uni-app默认支持Vue模板语法，但通过一些配置和工具，你可以在项目中启用JSX支持。不过，由于uni-app主要面向Vue开发者，使用JSX可能会带来一些兼容性和配置上的挑战。在实际项目中，请根据具体需求和团队技术栈选择合适的开发方式。

回到顶部