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

— marco

ах має сенс.

— Фікс

Відповіді:

Визначення його типу від Flow, це означає, що постійне додаток функціонує типу і воно повертає ReactNode.

Це означає, що функція App може повертати будь-який дійсний JSX (у реагуванні рідного його що-небудь з View, Text, .etc), ReactFragment, React.Portal, boolean, null, undefined

Якщо вас плутають знаки долара, ось посилання з поясненнями. https://www.saltycrane.com/flow-type-cheat-sheet/latest/

Існують окремі розділи для "приватних" чи "магічних" типів із знаком $ у назві. Дивіться замітку тут і коментуйте тут. Оновлення: Деякі ці типи зараз задокументовані тут.

Для зручності ви можете думати про це , як його Nodeз React(думаю про нього , як області видимості / імен)

— Лукаш Гібо Ваїк
джерело

Типовий текст буде ReactNodeбез$

— Томаш

Я вважаю, що зразок React Native використовує Flow. Але я не знаходжу жодної документації в Flow React$Node. Чи можете ви допомогти мені уточнити цей момент?

— Марко

Ок @marco мій поганий його Flow, а не машинопис, але, як я вже згадував у своїй відповіді, вузол React - це в основному будь-який елемент, який ви зможете надати, поставить у відповідь все визначення.

— Лукаш Гібо Ваїк

добре, але я все одно щось пропускаю React$Node(знак долара ...), я маю на увазі, в документі Flow doc немає ніяких посилань на це

— marco

@marco зафіксував відповідь: ReactNode не з Flow, його єдине визначення потоку для конкретного типу React

— Lukáš Gibo Vaic

React $ Node - це тип, визначений у react.js

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

— Сантомас
джерело

Це також тип оголошення компонента програми як функції, але ви можете змінити його на

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

Не забудьте видалити заяву Експорт програми за замовчуванням в останньому рядку.

— Теджу
джерело