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

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.

javascript reactjs react-native

— marco
quelle

Sind Sie sicher, dass es sich um eine JS-Datei handelt? Das sieht aus wie Typoskript.

— Phix

@Phix Ich denke, es verwendet Flow

— Marco

ahh macht Sinn.

— Phix

Antworten:

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

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

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

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

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