react-native
Реквизит

Вступление

Что такое реквизит?

Реквизиты используются для передачи данных от родительского к дочернему компоненту. Опоры читаются только. Детский компонент может получить только реквизит, переданный от родителя, используя this.props.keyName . Используя реквизит, можно сделать его компонент повторно используемым.

Использование реквизита

После завершения настройки. Скопируйте код ниже в index.android.js или в файл index.ios.js чтобы использовать реквизиты.

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);

Используя реквизиты, можно сделать свой компонент общим. Например, у вас есть компонент Button. Вы можете передать различные опоры этому компоненту, чтобы можно было поместить эту кнопку в любом месте.

_{источник: реквизит}

PropTypes

Пакет prop-types позволяет вам добавить проверку типа времени выполнения на ваш компонент, который гарантирует, что типы реквизита, переданные компоненту, верны. Например, если вы не передадите name или isYummy prop к компоненту ниже, это вызовет ошибку в режиме разработки. В режиме производства проверки типа prop не выполняются. Определение propTypes может сделать ваш компонент более читабельным и поддерживаемым.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { AppRegistry, Text, View } from 'react-native';

import styles from './styles.js';

class Recipe extends Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    isYummy: PropTypes.bool.isRequired
  }
  render() {
    return (
      <View style={styles.container}>
        <Text>{this.props.name}</Text>
        {this.props.isYummy ? <Text>THIS RECIPE IS YUMMY</Text> : null}
      </View>
    )
  }
}

AppRegistry.registerComponent('Recipe', () => Recipe);


// Using the component
<Recipe name="Pancakes" isYummy={true} />

Несколько PropTypes

Вы можете также иметь несколько propTypes для одного реквизита. Например, реквизит имени, который я принимаю, также может быть объектом, я могу написать его как.

static propTypes = {
  name: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.object
  ])
}

Детские реквизиты

Существует также специальный реквизит, называемый children , который не передается как

<Recipe children={something}/>

Вместо этого вы должны сделать это

<Recipe>
  <Text>Hello React Native</Text>
</Recipe>

то вы можете сделать это в рендере Рецепта:

return (
  <View style={styles.container}>
    {this.props.children}
    {this.props.isYummy ? <Text>THIS RECIPE IS YUMMY</Text> : null}
  </View>
)

У вас будет компонент <Text> в вашем Recipe говорящий Hello React Native , довольно крутой гул?

И propType детей

children: PropTypes.node

Посты по умолчанию

defaultProps позволяет устанавливать значения поддержки по умолчанию для вашего компонента. В приведенном ниже примере, если вы не передадите реквизиты имени, он отобразит Джона, иначе он отобразит пройденное значение

class Example extends Component {
  render() {
    return (
      <View>
        <Text>{this.props.name}</Text>
      </View>
    )
  }
}


Example.defaultProps = {
  name: 'John'
}