React-native：如何在 React-native 中使用（和翻译）带有 jsx 的 typescript .tsx 文件？

Posted 2023-02-21

【中文标题】React-native：如何在 React-native 中使用（和翻译）带有 jsx 的 typescript .tsx 文件？

【英文标题】：React-native: How to use (and translate) typescript .tsx files with jsx in React-native?

【发布时间】：2017-04-27 13:33:20

【问题描述】：

我是来自 reactjs+typescript 的 React-native 新手。我正在尝试建立一个相当简单的项目测试，看看这项技术是如何工作的。我正在使用 VS 代码。

按照基本教程，我已经设置了我的项目，我可以在 Visual Studio android 模拟器中运行它。

现在我想看看如何创建一个自定义的 .tsx 文件（比如 profile.tsx），编写一个渲染函数并将其显示在索引页面（index.android.js）上。

所以我创建了一个.tsx文件：（我已经省略了文件开头的各种导入语句）

export class Profile extend React.Component 

       render()
           return <View> this is the profile view </View>
       

使用 VS Code 我可以编译这个文件并生成它对应的 profile.js 和 profile.js.map 文件。

profile.js 的内容是：

"use strict";
const react_1 = require('react');
const react_native_1 = require('react-native');

...

class Profile extent react_1.Component 

     render()
          return react_1.default.createElement(react_native_1.View, null, "this is the profile view");
     

在运行时，react_1.default.createElement 行会出现以下消息：

undefine 不是对象（评估 react_1.default.createElement）

有这个“默认”属性，我不知道它是什么。

那么如何创建一个包含一些 jsx 代码的 .tsx 文件并正确地转译它以便在 react-native 应用程序中正确使用？

P.S: 这是我的 tsconfig.json 文件，我已经用

jsx="react"

启用了 jsx

任何帮助、建议、指导将不胜感激。 谢谢。

【问题讨论】：

您在extend 和extent 中有拼写错误。这是故意的还是应该是extends？

【参考方案1】：

现在 TSC 正在转译 ES6 模块语法，后来的 javascript 引擎期待默认导出（类似于 module.exports），但它不存在。您应该使用 ES6 目标和模块配置您的 TSC。

尝试更新tsconfig.json 文件中的编译器选项，如下所示：

  "compilerOptions": 
    "target": "es6",
    "allowJs": true,
    "jsx": "react",
    "sourceMap": true,
    "noImplicitAny": false
  

使用ES6 目标（模块默认为ES6），您的Profile 类应转译为：

class Profile extends Component 

     render()
          return React.createElement(View, null, "this is the profile view");
     

还记得安装 react 和 react-native 类型定义，使用 yarn（首选最新的 react-native）或 npm：yarn add @types/react-native @types/react -D 或 npm i @types/react-native @types/react -D

【讨论】：

非常感谢。有效！我将此标记为答案。

【参考方案2】：

通过避免导入组件和使用 * 例如解决了这个问题。 "从 "react" 导入 * 作为 React；"

这个问题也可能来自使用 tsc 编译的 JS。