React Native - Accessoires

Dans notre dernier chapitre, nous vous avons montré comment utiliser mutable state. Dans ce chapitre, nous allons vous montrer comment combiner l'état et leprops.

Les composants de présentation doivent obtenir toutes les données en passant props. Seuls les composants du conteneur doivent avoirstate.

Composant de conteneur

Nous allons maintenant comprendre ce qu'est un composant conteneur et comment il fonctionne.

Théorie

Nous allons maintenant mettre à jour notre composant conteneur. Ce composant gérera l'état et passera les accessoires au composant de présentation.

Le composant conteneur n'est utilisé que pour l'état de traitement. Toutes les fonctionnalités liées à la vue (style, etc.) seront gérées dans le composant de présentation.

Exemple

Si nous voulons utiliser l'exemple du dernier chapitre, nous devons supprimer le Textélément de la fonction de rendu puisque cet élément est utilisé pour présenter du texte aux utilisateurs. Cela devrait être à l'intérieur du composant de présentation.

Passons en revue le code dans l'exemple ci-dessous. Nous importerons lePresentationalComponent et passez-le à la fonction de rendu.

Après avoir importé le PresentationalComponentet passez-le à la fonction de rendu, nous devons passer les accessoires. Nous passerons les accessoires en ajoutantmyText = {this.state.myText} et deleteText = {this.deleteText} à <PresentationalComponent>. Maintenant, nous pourrons y accéder à l'intérieur du composant de présentation.

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PresentationalComponent from './PresentationalComponent'

export default class App extends React.Component {
   state = {
      myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, used do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
      aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
      nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
      officia deserunt mollit anim id est laborum.'
   }
   updateState = () => {
      this.setState({ myState: 'The state is updated' })
   }
   render() {
      return (
         <View>
            <PresentationalComponent myState = {this.state.myState} updateState = {this.updateState}/>
         </View>
      );
   }
}

Composant de présentation

Nous allons maintenant comprendre ce qu'est un composant de présentation et aussi comment il fonctionne.

Théorie

Les composants de présentation ne doivent être utilisés que pour présenter la vue aux utilisateurs. Ces composants n'ont pas d'état. Ils reçoivent toutes les données et fonctions comme accessoires.

La meilleure pratique consiste à utiliser autant de composants de présentation que possible.

Exemple

Comme nous l'avons mentionné dans notre chapitre précédent, nous utilisons la syntaxe de la fonction EC6 pour les composants de présentation.

Notre composant recevra des accessoires, retournera des éléments de vue, présentera du texte en utilisant {props.myText} et appelez le {props.deleteText} fonction lorsqu'un utilisateur clique sur le texte.

PresentationalComponent.js

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

const PresentationalComponent = (props) => {
   return (
      <View>
         <Text onPress = {props.updateState}>
            {props.myState}
         </Text>
      </View>
   )
}
export default PresentationalComponent

Maintenant, nous avons les mêmes fonctionnalités que dans notre Statechapitre. La seule différence est que nous avons refactoré notre code vers le conteneur et le composant de présentation.

Vous pouvez exécuter l'application et voir le texte comme dans la capture d'écran suivante.

Si vous cliquez sur du texte, il sera supprimé de l'écran.