const App: () => React $ Node = () => {…}: cosa significa questa istruzione?

il react-native init ProjectNamefile dell'app principale App.jscontiene la dichiarazione di un componente nel modo seguente:

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

Cosa significa questa istruzione?

Voglio dire, sono abituato a un componente definito come const App = () => {...}, quindi non capisco, in particolare, l'espressione in mezzo : () => React$Node.

javascript reactjs react-native

— marco
fonte

Sei sicuro che sia un file JS? Sembra un dattiloscritto.

— Phix,

@Phix Penso che stia usando Flow

— marco il

ahh ha senso.

— Phix,

Risposte:

La sua definizione di tipo da Flow, significa che l'app costante è di tipo funzione e restituisce ReactNode.

Ciò significa che la funzione App può restituire, qualsiasi JSX valido (in reazione nativa è qualsiasi cosa da Visualizza, Testo, .etc), ReactFragment, React.Portal, booleano, null, non definito

Se sei confuso sul simbolo del dollaro, ecco un link con una spiegazione. https://www.saltycrane.com/flow-type-cheat-sheet/latest/

Ci sono sezioni separate per tipi "privati" o "magici" con un $ nel nome. Vedi la nota qui e commenta qui. Aggiornamento: alcuni di questi tipi sono ora documentati qui.

Per facile puoi pensarlo come se provenisse Nodeda React(pensalo come ambito / spazio dei nomi)

— Lukáš Gibo Vaic
fonte

Dattiloscritto sarebbe ReactNode, senza$

— Tomasz Błachut il

Vedo che il campione React Native usa Flow. Ma non trovo alcuna documentazione in Flow about React$Node. Potete aiutarmi a chiarire questo punto?

— marco,

ok @marco mio male è Flow, non dattiloscritto ma come ho già detto nella mia risposta Il nodo React è fondamentalmente qualsiasi elemento che puoi renderizzare, metterà in risposta l'intera definizione.

— Lukáš Gibo Vaic,

bene, ma mi manca ancora qualcosa React$Node(il simbolo del dollaro ...), voglio dire, in Flow doc non c'è alcun riferimento ad esso

— marco

@marco ha risolto la risposta, ReactNode non proviene da Flow, la sua unica definizione Flow per il tipo specifico di React

— Lukáš Gibo Vaic

È anche un tipo di dichiarazione del componente App come funzione ma è possibile cambiarlo in

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

Non dimenticare di rimuovere l'istruzione Esporta l'app predefinita nell'ultima riga.

— Teju
fonte

React $ Node è un tipo definito in reazioni.js

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

— Сантомас
fonte