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

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

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

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

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

javascript reactjs react-native

— 마르코
소스

JS 파일인지 확실합니까? 그것은 typescript처럼 보입니다.

— Phix

@Phix Flow를 사용하고 있다고 생각합니다

— marco

아 이해가 되네요.

— Phix

답변:

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

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

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

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

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

— 루카스 지보 바 이치
소스

타이프 라이터는 것 ReactNode없이,$

— 토마스 Błachut

샘플 React Native가 Flow를 사용하는 것을 보았습니다. 그러나 Flow에 대한 문서를 찾지 못했습니다 React$Node. 이 점을 명확하게 설명해 주시겠습니까?

— marco

ok @marco typescript가 아니라 흐름이 좋지 않습니다.하지만 대답에서 언급했듯이 React 노드는 기본적으로 렌더링 할 수있는 모든 요소이며 전체 정의를 대답에 넣습니다.

— Lukáš Gibo Vaic

괜찮아요.하지만 여전히 React$Node달러 기호 에 대해 뭔가를 놓쳤습니다 . Flow doc에는 이에 대한 언급이 없습니다.

— marco

@marco가 ReactNode이 흐름에서없는 대답을 고정하기위한 유일한 흐름 정의는 특정 유형의 반응

— 루카스 GIBO VAIC

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 문을 제거하는 것을 잊지 마십시오.

— 테주
소스