개발하자

유형 스크립트 오류 JSX 요소 유형 '보기'가 JSX 요소에 대한 생성자 함수가 아닙니다

Cuire 2023. 8. 30. 21:31
반응형

유형 스크립트 오류 JSX 요소 유형 '보기'가 JSX 요소에 대한 생성자 함수가 아닙니다

프로그램 자체는 정상적으로 실행되지만, Typescript는 내 구성 요소에 대한 내 반환 기능에 빨간색으로 많은 항목을 밑줄로 표시하고 있다. 구체적으로 내 수입에서 나오는 모든 것.

, 등과 같은 것들은 이러한 "오류"를 던지고 있다. 나는 앱이 전혀 문제 없이 실행되기 때문에 인용문의 오류를 말한다. 내 IDE(VS 코드) 내의 타이프스크립트가 유일하게 불만이다. 내가 (오른쪽 하단 상태 표시줄 선택기를 통해) 자바스크립트 리액트 또는 타입스크립트 리액트를 선택하면 이러한 오류가 발생한다. 다음은 예입니다:

Text Problem

여기 내 소포의 중요한 부분들이 있다.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"
  },

그리고 다음은 이러한 오류를 처리하는 파일의 모양입니다:

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;

다음과 같은 구성 요소에서 이러한 오류가 발생하지 않도록 주의해야 합니다

여기 내 tsconfig도 있다:

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "jsx": "react-native",
        "lib": ["dom", "esnext"],
        "moduleResolution": "node",
        "noEmit": true,
        "skipLibCheck": true,
        "resolveJsonModule": true,
        "strict": true
    }
}

다소 관련이 있는데, VS 코드의 어떤 것이 모듈을 찾을 수 없다고 불평하고 있지만 실행 시에도 오류 없이 잘 작동한다



문제는 VS 코드가 잘못된 오래된 버전의 타입스크립트를 사용하고 있다는 것이었다. 나는 그것이 어떻게 그렇게 설정되었는지, 또는 어떻게 그것이 여전히 완전한 출시가 끝난 버전을 가지고 있는지 확신할 수 없다. 간단한 수정이지만 진단이 거의 불가능합니다. 내가 고친 곳은 여기야:

enter image description here

보시다시피 VS 코드 자체에 버전 2.7.2를 설치하고 선택했습니다. 나는 지금 3.9.7을 사용했고 그 모든 오류들이 사라졌다.



리액트 네이티브에서 타이프스크립트를 사용하는 경우 디버그하기가 정말 힘들다. 당신의 vscode 하단에는 타이프스크립트가 아니라고 쓰여 있어야 한다. 를 누르고 Typescript Jsx를 선택합니다.


반응형