const App: () => React $ Node = () => {…}: что означает эта инструкция?

на react-native init ProjectName, основной файл приложения App.jsсодержит объявление компонента следующим образом:

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

Что значит эта инструкция?

Я имею в виду, я привык к компоненту, определенному как const App = () => {...}, поэтому я не понимаю, в частности, выражение между ними : () => React$Node.

javascript reactjs react-native

— марко
источник

Вы уверены, что это файл JS? Это похоже на машинопись.

— Фикс

@Phix Я думаю , что с помощью Flow

— марко

ааа имеет смысл.

— Фикс

Ответы:

Его определение типа от Flow, это означает, что константа App имеет тип function и возвращает ReactNode.

Это означает, что функция App может вернуть любой допустимый JSX (в реагировать на нативное что-либо из View, Text, .etc), ReactFragment, React.Portal, логический, ноль, неопределенный

Если вы не уверены в знаке доллара, вот ссылка с объяснением. https://www.saltycrane.com/flow-type-cheat-sheet/latest/

Есть отдельные разделы для «приватных» или «магических» типов с символом $ в имени. Смотрите примечание здесь и комментируйте здесь. Обновление: некоторые из этих типов теперь описаны здесь.

Для удобства вы можете думать об этом , как его Nodeиз React(думаю о нем , как области видимости / имен)

— Лукаш Гибо Вайч
источник

Машинопись была бы ReactNode, без$

— Томаш Блахут

Я считаю, что образец React Native использует Flow. Но я не нахожу никакой документации в Flow React$Node. Можете ли вы помочь мне прояснить этот момент?

— Марко

ok @marco my bad - это Flow, а не машинопись, но, как я уже упоминал в моем ответе, узел React - это, по сути, любой элемент, который вы можете отобразить.

— Лукаш Гибо Вайч

хорошо, но я все еще что-то упускаю React$Node(знак доллара ...), я имею в виду, в Flow doc нет никакой ссылки на это

— marco

@marco исправил ответ, ReactNode не из Flow, его единственное определение Flow для конкретного типа React

— Lukáš Gibo Vaic

Это также тип объявления компонента App как функции, но вы можете изменить его на

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

Не забудьте удалить оператор Экспорт приложения по умолчанию в последней строке.

— Teju
источник

React $ Node - это тип, определенный вact.js

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

— Сантомас
источник