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

Question

我是 React-native 的新手，来自 reactjs+typescript。我正在尝试建立一个相当简单的项目测试，看看这项技术是如何工作的。我正在使用 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）

有这个"default"属性，我不知道它是什么。

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

P.S: 这是我的 tsconfig.json 文件，我启用了 jsx jsx="react"

如有任何帮助、建议和指导，我们将不胜感激。谢谢。

Answer 1

目前 TSC 正在转译 ES6 模块语法，稍后 JavaScript 引擎需要默认导出（类似于 module.exports），但不存在。您应该使用 ES6 目标和模块配置 TSC。

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

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

使用 ES6 目标（模块默认为 ES6 ），您的配置文件 class 应该被转换为：

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

Answer 2

问题已通过避免导入组件和使用 * 例如"import * as React from "反应";"

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

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

React-native: How to use (and translate) typescript .tsx files with jsx in React-native?

jsx

typescript

react-native

visual-studio-code

tsx