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

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