React Native - Accesorios

En nuestro último capítulo, le mostramos cómo usar mutable state. En este capítulo, le mostraremos cómo combinar el estado y elprops.

Los componentes de presentación deben obtener todos los datos pasando props. Solo los componentes del contenedor deben tenerstate.

Componente contenedor

Ahora entenderemos qué es un componente contenedor y también cómo funciona.

Teoría

Ahora actualizaremos nuestro componente contenedor. Este componente manejará el estado y pasará los accesorios al componente de presentación.

El componente contenedor solo se utiliza para el estado de manipulación. Toda la funcionalidad relacionada con la vista (estilo, etc.) se manejará en el componente de presentación.

Ejemplo

Si queremos usar el ejemplo del último capítulo, debemos eliminar el Textelemento de la función de render, ya que este elemento se utiliza para presentar texto a los usuarios. Esto debería estar dentro del componente de presentación.

Repasemos el código en el ejemplo que se muestra a continuación. Importaremos elPresentationalComponent y pasarlo a la función de render.

Después de importar el PresentationalComponenty pasarlo a la función de render, necesitamos pasar los accesorios. Pasaremos los accesorios añadiendomyText = {this.state.myText} y deleteText = {this.deleteText} a <PresentationalComponent>. Ahora, podremos acceder a esto dentro del componente de presentación.

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

Componente de presentación

Ahora entenderemos qué es un componente de presentación y también cómo funciona.

Teoría

Los componentes de presentación deben usarse solo para presentar la vista a los usuarios. Estos componentes no tienen estado. Reciben todos los datos y funciones como accesorios.

La mejor práctica es utilizar tantos componentes de presentación como sea posible.

Ejemplo

Como mencionamos en nuestro capítulo anterior, estamos usando la sintaxis de la función EC6 para los componentes de presentación.

Nuestro componente recibirá accesorios, devolverá elementos de vista, presentará texto usando {props.myText} y llama al {props.deleteText} función cuando un usuario hace clic en el texto.

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

Ahora, tenemos la misma funcionalidad que en nuestro Statecapítulo. La única diferencia es que refactorizamos nuestro código al contenedor y al componente de presentación.

Puede ejecutar la aplicación y ver el texto como en la siguiente captura de pantalla.

Si hace clic en el texto, se eliminará de la pantalla.