[英]Typescript error JSX element type 'View' is not a constructor function for JSX elements
The program itself runs fine, but Typescript is underlining a lot of items in red in my return function for my components.程序本身运行良好,但 Typescript 在我的组件返回函数中用红色强调了很多项目。 Specifically anything coming out of my
react-native
import.特别是我
react-native
导入中出现的任何内容。
Anything like View
, Button
, and the like are throwing these "errors".任何像
View
、 Button
之类的东西都会抛出这些“错误”。 I say errors in quotes because the app runs without any problems at all.我在引号中说错误是因为应用程序运行没有任何问题。 Typescript within my IDE (VS Code) is the only thing complaining.
我的 IDE(VS Code)中的打字稿是唯一抱怨的东西。 It throws these errors if I choose (through the bottom right status bar selector) JavaScript React or TypeScript React.
如果我选择(通过右下方的状态栏选择器)JavaScript React 或 TypeScript React,它会抛出这些错误。 Here is an example:
下面是一个例子:
Here is the important bits of my package.json这是我的 package.json 的重要部分
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@react-navigation/native": "^5.7.6",
"@react-navigation/stack": "^5.9.3",
"expo": "~39.0.2",
"expo-status-bar": "~1.0.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
"react-native-screens": "~2.10.1",
"react-native-web": "~0.13.12",
"react-native-gesture-handler": "~1.7.0",
"react-native-reanimated": "~1.13.0",
"react-native-safe-area-context": "3.1.4",
"@react-native-community/masked-view": "0.1.10"
},
"devDependencies": {
"react-native-web": "~0.13.7",
"@types/react": "*",
"@types/react-dom": "*",
"@types/react-native": "*",
"typescript": "~3.9.5"
},
And here is what a file looks like that is throwing these errors:这是抛出这些错误的文件的样子:
import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import { StyleSheet, Text, View, TextInput, Button } from "react-native";
const SummaryScreen = ({ navigation }) => {
const accountDetailsPage = () => {
navigation.navigate("Account Details");
};
const contactDetailsPage = () => {
navigation.navigate("Contact Details");
};
return (
<View style={styles.container}>
<Text>HERE IS A BUNCH OF TEXT</Text>
<Button title="Account Details" onPress={accountDetailsPage} />
<Button title="Contact Details" onPress={contactDetailsPage} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
},
});
export default SummaryScreen;
I think it's important to note I do NOT get these errors on components created from @react-navigation
such as <Navigator>
and <Stack.Screen ...
我认为重要的是要注意我不会在从
@react-navigation
创建的组件上收到这些错误,例如<Navigator>
和<Stack.Screen ...
Here is my tsconfig as well:这也是我的 tsconfig :
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"jsx": "react-native",
"lib": ["dom", "esnext"],
"moduleResolution": "node",
"noEmit": true,
"skipLibCheck": true,
"resolveJsonModule": true,
"strict": true
}
}
Somewhat related, something in VS Code is complaining it can't find the module for useState
but that also works fine when running, with no errors有点相关,VS Code 中的某些内容抱怨它找不到
useState
的模块,但在运行时也可以正常工作,没有错误
The problem was VS Code was using the wrong, and very old version of TypeScript.问题是 VS Code 使用了错误的、非常旧的 TypeScript 版本。 I'm not sure how it got set that way, or how it still had a version that was over a full release behind.
我不确定它是如何设置成这样的,或者它仍然有一个完整版本落后的版本。 Simple fix, but almost impossible to diagnose.
简单的修复,但几乎不可能诊断。 Here's where I fixed it:
这是我修复它的地方:
As you can see, I had version 2.7.2 installed on VS Code itself and that WAS selected.如您所见,我在 VS Code 本身上安装了 2.7.2 版,并且选择了该版本。 I now have 3.9.7 used and all those errors vanished.
我现在使用了 3.9.7,所有这些错误都消失了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.