react-native
Rekvisita

Introduktion

Vad är rekvisita?

Props används för att överföra data från förälder till barnkomponent. Rekvisita är endast läst. Underordnad komponent kan bara få rekvisita som skickas från förälder med hjälp av this.props.keyName . Med hjälp av rekvisita kan man göra hans komponent återanvändbar.

Användning av rekvisita

När installationen är klar. Kopiera koden nedan till index.android.js eller till index.ios.js fil för att använda rekvisita.

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

Med hjälp av rekvisita kan man göra hans komponent generisk. Till exempel har du en knappkomponent. Du kan skicka olika rekvisita till den komponenten, så att man kan placera den knappen var som helst i hans vy.

_{källa: Props-React Native}

PropTypes

Paketet med prop-types låter dig lägga till kontroll av runtime-typ till din komponent som säkerställer att de typer av rekvisita som skickas till komponenten är korrekta. Om du till exempel inte isYummy ett name eller isYummy till komponenten nedan kommer det att kasta ett fel i utvecklingsläget. I produktionsläge görs inte kontrollerna av rekvisita. Att definiera propTypes kan göra din komponent mer läsbar och underhållbar.

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} />

Flera proptyper

Du kan också ha flera propTypes för en rekvisita. Till exempel kan namnsrekvisita jag tar också vara ett objekt, jag kan skriva det som.

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

Barnrekvisita

Det finns också en speciell rekvisita som heter children , som inte skickas in som

<Recipe children={something}/>

Istället bör du göra detta

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

då kan du göra detta i Recept's render:

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

Du kommer att ha en <Text> -del i ditt Recipe säger Hello React Native , ganska cool hum?

Och den typ av barn är

children: PropTypes.node

Standarduppgifter

defaultProps låter dig ställa in standardvärden för din komponent. I exemplet nedan om du inte skickar namnrekvisita kommer det att visa John annars kommer det att visa det godkända värdet

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


Example.defaultProps = {
  name: 'John'
}