const App: () => React $ Node = () => {…}: ¿qué significa esta instrucción?

activado react-native init ProjectName, el archivo principal de la aplicación App.jscontiene la declaración de un componente de la siguiente manera:

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

¿Qué significa esta instrucción?

Quiero decir, estoy acostumbrado a un componente definido como const App = () => {...}, por lo que no entiendo, en particular, la expresión intermedia : () => React$Node.

javascript reactjs react-native marco
fuente

¿Estás seguro de que es un archivo JS? Eso parece mecanografiado.

Phix

@ Phh Creo que está usando Flow

marco

Ahh tiene sentido.

Phix

Respuestas:

Su definición de tipo de Flow, significa que la aplicación constante es de tipo función y devuelve ReactNode.

Esto significa que la función App puede devolver, cualquier JSX válido (en reaccionar nativo es cualquier cosa desde Ver, Texto, .etc), ReactFragment, React.Portal, boolean, null, undefined

Si está confundido acerca del signo de dólar, aquí hay un enlace con una explicación. https://www.saltycrane.com/flow-type-cheat-sheet/latest/

Hay secciones separadas para los tipos "privados" o "mágicos" con un $ en el nombre. Vea la nota aquí y comente aquí. Actualización: algunos de estos tipos ahora están documentados aquí.

Para una fácil se puede pensar en él como su Nodede React(pensar en él como el alcance / espacio de nombres)

Lukáš Gibo Vaic
fuente

Mecanografiado sería ReactNode, sin$

Tomasz Błachut

Creo que la muestra React Native usa Flow. Pero no encuentro ninguna documentación en Flow sobre React$Node. ¿Me pueden ayudar a aclarar este punto?

marco

ok @marco my bad its Flow, no mecanografiado, pero como mencioné en mi respuesta React node es básicamente cualquier elemento que puedas representar, pondrá toda la definición en respuesta.

Lukáš Gibo Vaic

bien, pero aún extraño algo sobre React$Node(el signo del dólar ...), quiero decir, en Flow doc no hay ninguna referencia a él

marco

@marco arregló la respuesta, ReactNode no es de Flow, su única definición de Flow para el tipo específico React

Lukáš Gibo Vaic

También es un tipo de declaración del componente de la aplicación como función, pero puede cambiarlo a

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

No olvide eliminar la declaración Exportar aplicación predeterminada en la última línea.

Teju
fuente

React $ Node es un tipo definido en react.js

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

Сантомас
fuente