[javascript] const App : () => React $ Node = () => {…} :이 명령은 무엇을 의미합니까?

Program / 글쓴이

on react-native init ProjectName기본 앱 파일 App.js에는 다음과 같은 방식으로 컴포넌트 선언이 포함됩니다.

const App: () => React$Node = () => {...}

이 지시는 무엇을 의미합니까?

나는로 정의 된 구성 요소에 익숙하기 const App = () => {...}때문에 특히 사이의 표현을 이해하지 못합니다 : () => React$Node.

답변

Flow에서 형식 정의는 상수 App이 함수 형식이며 ReactNode를 반환 함을 의미합니다.

ReactNode는 다음 유형 중 하나입니다. ReactChild | ReactFragment | ReactPortal | boolean | null | undefined

이것은 함수 앱이 유효한 JSX (View, Text, .etc 등의 모든 것에 반응하여), ReactFragment, React.Portal, boolean, null, undefined를 반환 할 수 있음을 의미합니다.

달러 기호에 대해 혼란 스러우면 여기에 설명이있는 링크가 있습니다.
https://www.saltycrane.com/flow-type-cheat-sheet/latest/

“private”또는 “magic”유형에 대해 이름에 $가있는 별도의 섹션이 있습니다. 여기에있는 메모를 참조하십시오. 업데이트 :이 유형 중 일부는 여기에 문서화되어 있습니다.

쉽게 들어 당신은 생각할 수의 Node에서 React(범위 / 네임 스페이스로 생각)

답변

React $ Node는 react.js에 정의 된 유형입니다

declare type React$Node =
  | null
  | boolean
  | number
  | string
  | React$Element<any>
  | React$Portal
  | Iterable<?React$Node>;

답변

또한 앱 구성 요소를 함수로 선언 한 유형이지만 다음과 같이 변경할 수 있습니다.

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.instructions}>Hello World!</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5
    }
});

마지막 줄에서 Export Default App 문을 제거하는 것을 잊지 마십시오.

답변