const App: () => Reagir $ Node = () => {…}: o que significa esta instrução?

em react-native init ProjectName, o arquivo principal do aplicativo App.jscontém a declaração de um componente da seguinte maneira:

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

O que significa essa instrução?

Quero dizer, estou acostumado a componentes definidos como const App = () => {...}, então não entendo, em particular, a expressão intermediária : () => React$Node.

javascript reactjs react-native

— marco
fonte

Tem certeza de que é um arquivo JS? Isso parece datilografado.

— Phix 7/10/19

@Phix Eu acho que está usando Flow

— marco

ahh faz sentido.

— Phix 07/10/19

Respostas:

Sua definição de tipo do Flow, significa que App constante é da função type e retorna ReactNode.

Isso significa que a função App pode retornar, qualquer JSX válido (em reagir nativo é qualquer coisa de View, Text, .etc), ReactFragment, React.Portal, booleano, nulo, indefinido

Se você está confuso sobre o cifrão, aqui está um link com a explicação. https://www.saltycrane.com/flow-type-cheat-sheet/latest/

Existem seções separadas para os tipos "privado" ou "mágico" com um $ no nome. Veja a nota aqui e comente aqui. Atualização: alguns desses tipos agora estão documentados aqui.

Para facilitar, você pode pensar nisso como sendo de Nodeorigem React(pense nisso como escopo / espaço para nome)

— Gibu Vaic, Lukáš
fonte

Texto ReactNode$

— datilografado

Acho que a amostra React Native usa Flow. Mas não encontro nenhuma documentação no Flow sobre React$Node. Você pode me ajudar a esclarecer esse ponto?

— Marco

ok @marco meu fluxo ruim, não datilografado, mas como mencionei na minha resposta O nó React é basicamente qualquer elemento que você possa renderizar, colocará toda a definição em resposta.

— Lukáš Gibo Vaic 7/10/19

bem, mas eu ainda falta alguma coisa sobre React$Node(o cifrão ...), quer dizer, em Fluxo doc não há qualquer referência a ele

— marco

@marco fixa a resposta, ReactNode não é de Flow, sua única definição de fluxo para Reagir tipo específico

— Lukáš Gibo Vaic

React $ Node é um tipo definido em react.js

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

— Сантомас
fonte

Também é um tipo de declaração do componente App como uma função, mas você pode alterá-lo para

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
    }
});

Não se esqueça de remover a instrução Exportar aplicativo padrão na última linha.

— Teju
fonte