Aplikasi const: () => React $ Node = () => {...}: apa artinya instruksi ini?

pada react-native init ProjectName, file aplikasi utamaApp.js berisi deklarasi komponen dengan cara berikut:

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

Apa artinya instruksi ini?

Maksudku, aku sudah terbiasa dengan komponen yang didefinisikan const App = () => {...}, jadi aku tidak mengerti, khususnya, ekspresi di antaranya : () => React$Node.

javascript reactjs react-native marco
sumber

Apakah Anda yakin itu file JS? Itu terlihat seperti naskah.

Phix

@Fix Saya pikir ini menggunakan Flow

marco

ahh masuk akal.

Phix

Jawaban:

Jenis definisi dari Flow, itu berarti bahwa App konstan adalah fungsi tipe dan mengembalikan ReactNode.

Ini berarti fungsi App dapat mengembalikan, JSX apa pun yang valid (dalam reaksi asli apa saja dari View, Text, .etc), ReactFragment, React.Portal, boolean, null, undefined

Jika Anda bingung tentang tanda dolar, di sini ada tautan dengan penjelasan. https://www.saltycrane.com/flow-type-cheat-sheet/latest/

Ada bagian terpisah untuk jenis "pribadi" atau "ajaib" dengan $ pada namanya. Lihat catatan di sini dan komentari di sini. Pembaruan: Beberapa jenis ini sekarang didokumentasikan di sini.

Untuk memudahkan Anda dapat menganggapnya sebagai Nodedari React(anggap sebagai lingkup / namespace)

Lukáš Gibo Vaic
sumber

Naskah akan ReactNode, tanpa$

Tomasz Błachut

Saya melihat bahwa sampel Bereaksi Asli menggunakan Flow. Tapi saya tidak menemukan dokumentasi di Flow tentang React$Node. Bisakah Anda membantu saya mengklarifikasi hal ini?

marco

ok @marco aliran saya buruk, bukan naskah tapi seperti yang saya sebutkan dalam jawaban saya node Bereaksi pada dasarnya adalah setiap elemen yang dapat Anda render, akan menempatkan seluruh definisi menjadi jawaban.

Lukáš Gibo Vaic

baik-baik saja, tapi saya masih kehilangan sesuatu tentang React$Node(tanda dolar ...), maksud saya, dalam Flow doc tidak ada referensi untuk itu

marco

@marco memperbaiki jawabannya, ReactNode bukan dari Flow, satu-satunya definisi aliran untuk tipe spesifik Bereaksi

Lukáš Gibo Vaic

Bereaksi $ Node adalah jenis yang didefinisikan dalam react.js

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

Сантомас
sumber

Ini juga merupakan jenis deklarasi komponen Aplikasi sebagai fungsi tetapi Anda dapat mengubahnya

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

Jangan lupa untuk menghapus pernyataan Ekspor aplikasi default di baris terakhir.

Teju
sumber