const App: () => React $ Node = () => {…}: que signifie cette instruction?

le react-native init ProjectName, le fichier d'application principal App.jscontient la déclaration d'un composant de la manière suivante:

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

Que signifie cette instruction?

Je veux dire, je suis habitué aux composants définis comme const App = () => {...}, donc je ne comprends pas, en particulier, l'expression entre les deux : () => React$Node.

javascript reactjs react-native

— marco
source

Êtes-vous sûr qu'il s'agit d'un fichier JS? Cela ressemble à du tapuscrit.

— Phix

@Phix Je pense qu'il utilise Flow

— marco

ahh est logique.

— Phix

Réponses:

Sa définition de type à partir de Flow, cela signifie que la constante App est de type fonction et elle renvoie ReactNode.

Cela signifie que la fonction App peut renvoyer, n'importe quel JSX valide (dans React natif, c'est n'importe quoi de View, Text, .etc), ReactFragment, React.Portal, boolean, null, undefined

Si vous êtes confus au sujet du signe dollar, voici un lien avec l'explication. https://www.saltycrane.com/flow-type-cheat-sheet/latest/

Il existe des sections distinctes pour les types "privés" ou "magiques" avec un $ dans le nom. Voir la note ici et commenter ici. Mise à jour: certains de ces types sont désormais documentés ici.

Pour facile , vous pouvez penser comme Nodede React(penser comme champ / espace de noms)

— Lukáš Gibo Vaic
source

Typographie serait ReactNode, sans$

— Tomasz Błachut

Je suppose que l'exemple React Native utilise Flow. Mais je ne trouve aucune documentation dans Flow à propos de React$Node. Pouvez-vous m'aider à clarifier ce point?

— marco

ok @marco my bad its Flow, pas dactylographié mais comme je l'ai mentionné dans ma réponse, le nœud React est fondamentalement tout élément que vous pouvez rendre, mettra toute la définition en réponse.

— Lukáš Gibo Vaic

bien, mais il me manque encore quelque chose React$Node(le signe dollar ...), je veux dire, dans Flow doc il n'y a aucune référence

— marco

@marco a corrigé la réponse, ReactNode n'est pas de Flow, sa seule définition de Flow pour le type spécifique React

— Lukáš Gibo Vaic

Il s'agit également d'un type de déclaration du composant App en tant que fonction, mais vous pouvez le modifier en

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'oubliez pas de supprimer la déclaration Exporter l'application par défaut à la dernière ligne.

— Teju
source

React $ Node est un type défini dans react.js

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

— Сантомас
source