react-native
Rekwisieten

Invoering

Wat zijn rekwisieten?

Props worden gebruikt om gegevens over te dragen van ouder naar kind component. Rekwisieten zijn alleen-lezen. Onderliggend onderdeel kan alleen de rekwisieten doorgeven van ouder met behulp van this.props.keyName . Met behulp van rekwisieten kan men zijn component herbruikbaar maken.

Gebruik van rekwisieten

Nadat de installatie is voltooid. Kopieer de onderstaande code naar index.android.js of naar index.ios.js om de rekwisieten te gebruiken.

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

Met behulp van rekwisieten kan men zijn component generiek maken. U hebt bijvoorbeeld een component Button. Je kunt verschillende rekwisieten aan dat onderdeel doorgeven, zodat je die knop overal in zijn weergave kunt plaatsen.

_{bron: Props-React Native}

PropTypes

Met het prop-types pakket kunt u runtime-type controle toevoegen aan uw component die ervoor zorgt dat de soorten props die aan de component worden doorgegeven, correct zijn. Als u bijvoorbeeld geen name of isYummy prop isYummy aan het isYummy onderdeel, geeft dit een foutmelding in de ontwikkelingsmodus. In de productiemodus worden de proptypecontroles niet uitgevoerd. Door propTypes definiëren propTypes kan uw component beter leesbaar en onderhoudbaar worden.

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

Meerdere PropTypes

Je kunt ook meerdere propTypes voor één propTypes . De naamprops die ik neem, kan bijvoorbeeld ook een object zijn, ik kan het schrijven als.

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

Props voor kinderen

Er is ook een speciale rekwisieten genaamd children , die niet wordt doorgegeven zoals

<Recipe children={something}/>

In plaats daarvan zou je dit moeten doen

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

dan kun je dit doen in de weergave van Recept:

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

Je hebt een <Text> -component in je Recipe tekst Hello React Native , pretty cool brom?

En het propType van kinderen is

children: PropTypes.node

Standaard rekwisieten

Met defaultProps kunt u standaardprop-waarden instellen voor uw component. Als u in het onderstaande voorbeeld de naamprops niet doorgeeft, wordt John weergegeven, anders wordt de doorgegeven waarde weergegeven

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


Example.defaultProps = {
  name: 'John'
}