const Uygulama: () => React $ Node = () => {…}: bu talimat ne anlama geliyor?

tarihinde react-native init ProjectName, ana uygulama dosyası App.jsbir bileşenin bildirimini aşağıdaki şekilde içerir:

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

Bu talimat ne anlama geliyor?

Yani, olarak tanımlanan bileşene alışkınım const App = () => {...}, bu yüzden özellikle aradaki ifadeyi anlamıyorum : () => React$Node.

javascript reactjs react-native

— marco
kaynak

Bunun bir JS dosyası olduğundan emin misiniz? Daktilo yazısı gibi görünüyor.

— Phix

@Phix Bence Flow kullanıyor

— marco

ahh mantıklı.

— Phix

Yanıtlar:

Flow'dan tür tanımı, sabit App tür işlevinde olduğu ve ReactNode döndürdüğü anlamına gelir.

Bu, App'in geri dönebileceği, herhangi bir geçerli JSX'in (Görünüm, Metin, .etc'den yerel olarak herhangi bir şeyi tepki vermesi), ReactFragment, React.Portal, boolean, null, undefined

Dolar işareti konusunda kafanız karıştıysa, burada açıklama içeren bir bağlantı var. https://www.saltycrane.com/flow-type-cheat-sheet/latest/

Adında $ olan "özel" veya "sihirli" türler için ayrı bölümler vardır. Buradaki nota bakın ve buraya yorum yapın. Güncelleme: Bu türlerin bazıları şimdi burada belgelenmiştir.

Kolay için, olarak düşünmek olabilir onun Nodedan React(kapsam / ad olarak düşünün)

— Lukáš Gibo Vaic
kaynak

ReactNode$

— Daktilo

React Native örneğinin Flow kullandığını görüyorum. Ancak Flow ile ilgili herhangi bir belge bulamıyorum React$Node. Bu noktayı netleştirmeme yardım edebilir misin?

— marco

ok @marco benim kötü onun Akış, daktilo değil ama cevabımda belirttiğim gibi Reaksiyon düğümü temelde oluşturabileceğiniz herhangi bir elementtir, tüm tanımı cevaplayacaktır.

— Lukáš Gibo Vaic

iyi, ama hala React$Node(dolar işareti ...) hakkında bir şey özledim , yani, Akış doktorda herhangi bir referans yok

— marco

@marco cevabı düzeltti, ReactNode, React'e özgü tip için tek Akış tanımı

— Flow'dan değil

React $ Node, reakt.js'de tanımlanan bir tür

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

— Сантомас
kaynak

Ayrıca, işlev olarak Uygulama bileşeninin bir bildirim biçimidir, ancak bunu

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

Son satırda Varsayılan Uygulamayı Dışa Aktar ifadesini kaldırmayı unutmayın.

— Teju
kaynak