const App: () => React $ Node = () => {…}: Was bedeutet diese Anweisung?

23

on enthält react-native init ProjectNamedie Haupt-App-Datei App.jsdie Deklaration einer Komponente auf folgende Weise:

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

Was bedeutet diese Anweisung?

Ich bin an Komponenten gewöhnt, die als definiert sind const App = () => {...}, daher verstehe ich insbesondere den Ausdruck dazwischen nicht : () => React$Node.

marco
quelle
8
Sind Sie sicher, dass es sich um eine JS-Datei handelt? Das sieht aus wie Typoskript.
Phix
4
@Phix Ich denke, es verwendet Flow
Marco
2
ahh macht Sinn.
Phix

Antworten:

15

Die Typdefinition von Flow bedeutet, dass die Konstante App vom Typ function ist und ReactNode zurückgibt.

ReactNode ist einer dieser Typen: ReactChild | ReactFragment | ReactPortal | boolean | null | undefined

Dies bedeutet, dass die Funktion App jedes gültige JSX (in React Native ist alles aus View, Text, .etc), ReactFragment, React.Portal, Boolean, Null, Undefined zurückgeben kann

Wenn Sie über das Dollarzeichen verwirrt sind, finden Sie hier einen Link mit Erläuterungen. https://www.saltycrane.com/flow-type-cheat-sheet/latest/

Es gibt separate Abschnitte für "private" oder "magische" Typen mit einem $ im Namen. Siehe den Hinweis hier und Kommentar hier. Update: Einige dieser Typen sind jetzt hier dokumentiert.

Für einfach können Sie es als sein Nodevon Reactvorstellen (stellen Sie es sich als Bereich / Namespace vor)

Lukáš Gibo Vaic
quelle
3
Typoskript wäre ReactNode, ohne$
Tomasz Błachut
Ich sehe, dass die Probe React Native Flow verwendet. Aber ich finde keine Dokumentation in Flow über React$Node. Können Sie mir helfen, diesen Punkt zu klären?
Marco
ok @marco my bad its Flow, kein Typoskript, aber wie ich in meiner Antwort erwähnt habe, ist der React-Knoten im Grunde jedes Element, das Sie rendern können.
Lukáš Gibo Vaic
gut, aber ich vermisse immer noch etwas über React$Node(das Dollarzeichen ...), ich meine, in Flow Doc gibt es keinen Hinweis darauf
Marco
@marco korrigierte die Antwort, ReactNode ist nicht von Flow, seine einzige Flow-Definition für React-spezifischen Typ
Lukáš Gibo Vaic
1

React $ Node ist ein in react.js definierter Typ

declare type React$Node =
  | null
  | boolean
  | number
  | string
  | React$Element<any>
  | React$Portal
  | Iterable<?React$Node>;
Сантомас
quelle
1

Es ist auch eine Art Deklaration der App-Komponente als Funktion, aber Sie können sie in ändern

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

Vergessen Sie nicht, die Anweisung zu entfernen. Exportieren Sie die Standard-App in der letzten Zeile.

Teju
quelle