где определяется: `this.props`, на который ссылается первая строка внутри функции` render () `?

Question

На следующий код:

1. где определено: this.props ссылка на первую строку внутри функции render()? Существует ли какая-либо связь между этой строчной переменной: props с заглавной буквы Props? любое соглашение здесь?

2. какое значение имеет: ...extends React.Component<Props>?

3. Какое значение имеет строка /* @flow */ в самом верху файла?

https://github.com/callstack/react-native-paper/blob/e4ca933f386d7b485f6580c332f0638a55dfe2db/example/src/CardExample.js#L27

/* @flow */

import * as React from 'react';
import { Alert, ScrollView, StyleSheet } from 'react-native';
import {
  Title,
  Caption,
  Paragraph,
  Card,
  Button,
  withTheme,
  type Theme,
} from 'react-native-paper';

type Props = {
  theme: Theme,
};

class CardExample extends React.Component<Props> {
  static title = 'Card';

  render() {
    const {
      theme: {
        colors: { background },
      },
    } = this.props;
    return (
      <ScrollView
        style={[styles.container, { backgroundColor: background }]}
        contentContainerStyle={styles.content}
      >
        <Card style={styles.card}>
          <Card.Cover source={require('../assets/wrecked-ship.jpg')} />
          <Card.Content>
            <Title>Abandoned Ship</Title>
            <Paragraph>
              The Abandoned Ship is a wrecked ship located on Route 108 in
              Hoenn, originally being a ship named the S.S. Cactus. The second
              part of the ship can only be accessed by using Dive and contains
              the Scanner.
            </Paragraph>
          </Card.Content>
        </Card>
        <Card style={styles.card}>
          <Card.Cover source={require('../assets/forest.jpg')} />
          <Card.Actions>
            <Button onPress={() => {}}>Share</Button>
            <Button onPress={() => {}}>Explore</Button>
          </Card.Actions>
        </Card>
        <Card style={styles.card}>
          <Card.Content>
            <Title>Berries</Title>
            <Caption>Omega Ruby</Caption>
            <Paragraph>
              Dotted around the Hoenn region, you will find loamy soil, many of
              which are housing berries. Once you have picked the berries, then
              you have the ability to use that loamy soil to grow your own
              berries. These can be any berry and will require attention to get
              the best crop.
            </Paragraph>
          </Card.Content>
        </Card>
        <Card style={styles.card}>
          <Title>Just Strawberries</Title>
          <Card.Cover source={require('../assets/strawberries.jpg')} />
        </Card>
        <Card
          style={styles.card}
          onPress={() => {
            Alert.alert('The Chameleon is Pressed');
          }}
        >
          <Card.Cover source={require('../assets/chameleon.jpg')} />
          <Card.Content>
            <Title>Pressable Chameleon</Title>
            <Paragraph>
              This is a pressable chameleon. If you press me, I will alert.
            </Paragraph>
          </Card.Content>
        </Card>
        <Card
          style={styles.card}
          onLongPress={() => {
            Alert.alert('The City is Long Pressed');
          }}
        >
          <Card.Cover source={require('../assets/city.jpg')} />
          <Card.Content>
            <Title>Long Pressable City</Title>
            <Paragraph>
              This is a long press only city. If you long press me, I will
              alert.
            </Paragraph>
          </Card.Content>
        </Card>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    padding: 4,
  },
  card: {
    margin: 4,
  },
});

export default withTheme(CardExample);

Не могли бы вы пролить свет на это?

Ссылка:

https://flow.org/en/docs/react/components/

Спасибо!

Answer 1

1. props определен в Компоненте (находится в базовом классе), потому что у вас есть FLOW, this.props должен иметь форму Props)
2. Вы расширяете базовый компонент, и ваш компонент может принимать данные фигуры "Реквизит". В вашем примере ваш компонент принимает тему свойства фигуры "Реквизит".
3. Flow - статическая типизация в JavaScript (https://github.com/facebook/flow || https://flow.org/)