我不确定发生了什么变化,也许甚至与babel有关,但是当我使用像这样的东西时,我开始收到UserControler_1
之类的错误
UserControler.ts
export function signOut() { console.log("Sign Out") }
Page.tsx
import * as React from "react;
import { signOut } from "./UserControler";
import { TouchableWithoutFeedback, Text } from "react-native";
class Page extends React.Component {
_signOut = () => signOut()
render() {
return (
<TouchableWithoutFeedback onPress={this._signOut}>
<Text>Sign Out</Text>
</TouchableWithoutFeedback>
)
}
}
上面的结果是错误的
UserControler_1未定义
有时它会更具体地错误,即
无法找到变量:signOut
最奇怪的是,如果我将代码更改为类似的东西,它可以正常工作
import * as React from "react;
import { signOut } from "./UserControler";
class Page extends React.Component {
render() {
return (
<TouchableWithoutFeedback onPress={() => signOut}>
<Text>Sign Out</Text>
</TouchableWithoutFeedback>
)
}
}
非常困惑
我的tsconfig
{
"compilerOptions": {
"moduleResolution": "node",
"module": "es6",
"target": "es6",
"lib": ["es7"],
"allowJs": true,
"checkJs": true,
"jsx": "react-native",
"removeComments": true,
"outDir": "./dist",
"typeRoots": ["node_modules/@types", "./typings"],
"noFallthroughCasesInSwitch": true,
"noImplicitReturns": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"allowSyntheticDefaultImports": true,
"strict": true
},
"exclude": ["./node_modules", "./android", "./ios", "./__tests__", "./dist", "./__mocks__"],
"include": ["./src"]
}
这构建到dist文件夹中,babel从中获取文件并因此使应用程序正常工作,我的babelrc
{
"presets": ["react-native"]
}
答案 0 :(得分:1)
<TouchableWithoutFeedback onPress={() => signOut}>
正常工作,因为您要返回对上面导入的函数signOut的引用。需要注意的重要事项是=&gt;无论如何回报。
_signOut = () => signOut()
render() {
return (
<TouchableWithoutFeedback onPress={this._signOut}>
不起作用,因为在_signOut中你使用另一个箭头函数,但这次它返回signOut(),然后在那里调用。你所看到的奇怪之处可能来自这样一个事实:在某些点上,当它击中你的代码并调用函数时,函数可能还没有被导入。
所以解决方案是这样的
_signOut = () => signOut
render() {
return (
<TouchableWithoutFeedback onPress={this._signOut}>
通过不像以前那样调用函数,一切都按预期工作。
查看有关如何在反应中使用箭头功能的优秀说明:https://stackoverflow.com/a/48700540/214347
答案 1 :(得分:1)
这似乎是2.7.1
中引入的打字稿错误 - 它非常烦人,但好的是升级到2.7.2
会修复它。 (至少它解决了我遇到的问题)。