Empleo de Props en React

Empleo de Props en React

Empleo de Props en React

Hola a todos, nuestro equipo de DevSun Europe continúa con la serie de artículos relacionados con React. En la publicación que hoy nos ocupa, presentamos las formas de emplear los props en React. Los diferentes tipos de props que pueden declarase. Estos junto a los estados (states) forman parte esencial de la estructura de un componente para la visualización y manejo de los datos.

Formas de usar props para pasar datos al componente

El concepto de props, no es más que la abreviatura de la palabra propiedades, que se definen en un componente en React. Los props hacen posible que los componentes sean reusables y puedan componerse entre ellos. Mediante los props son pasados datos o funciones del componente padre al hijo. Entre sus cualidades los props son de solo-lectura, pueden definirse sus valores por defecto en los componentes y declararse de un tipo de datos específico. Los props se asemejan a los atributos de un elemento HTML.

Con el siguiente ejemplo, mostramos como pueden declararse los props en un componente definido como una clase ES6 (si desea conocer las diferentes formas de declarar un componente puede visitar nuestro artículo Tipos de Componentes en React):

import React from 'react';

class Header extends React.Component {

  render() {
    return (
      <div className="navbar navbar-dark bg-dark">
        <h2>{this.props.title}</h2>
      </div>
    );
  }
}

export default Header;

En este caso, se ha creado una propiedad nombrada title en el componente. Con el uso de this.props se puede acceder a la propiedad dentro de la instancia del componente creado.

Otro modo se representa en el componente definido como una función en cualquiera de las dos variantes mostradas:

 import React from 'react';

function Header(props) {
  return <div className="navbar navbar-dark bg-dark">
    <h2>{props.title}</h2>
  </div>
}

export default Header;

ó

import React from 'react';

const Header = props => {
  return (
    <div className="navbar navbar-dark bg-dark">
      <h2>{props.title}</h2>
    </div>
  )
};

export default Header;

Para estos ejemplos, se necesita pasar la variable props como parámetro de la función y hacer la llamada simplemente con props.nombre-de-la-propiedad.

En un componente padre, el componente hijo puede personalizarse en correspondencia con las características de la aplicación con el uso de los props, como se exhibe en el código:

import React, { Component } from 'react';
import Header from './components/Header';

class App extends Component {
  render() {
    return (
      <div className="container">
        <Header title="Nombre de la Aplicación" />
        <Header title="Configuración" />
      </div>
    );
  }
}

ReactDOM.render(
  <App />, document.getElementById('root')
);
empleo-props-img
Foto de Dribble por: Ralph Mayer

¿Cómo pasar funciones a través de props?

En React está permitido pasar funciones entre componentes con el empleo de props. Con el siguiente código ilustramos esa posibilidad. En esta muestra, el componente hijo posee los botones que incrementan o decrementan un contador que se visualiza en el componente padre.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ButtonContainer from './components/ButtonContainer';

class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      count: 0
    };

    this.increment = this.increment.bind(this);
    this.decrement = this.decrement.bind(this);
  }

  increment() {
    this.setState((prevState) => ({
      count: prevState.count + 1
    }));
  }
  decrement() {
    this.setState((prevState) => ({
      count: prevState.count - 1
    }));
  }

  render() {

    return (
      <div className="container">
        <div>
          <p>{this.state.count}</p>
        </div>
        <ButtonContainer
          increment={this.increment}
          decrement={this.decrement}
        />
      </div>
    );
  }
}

ReactDOM.render(
  <App />, document.getElementById('root')
);  

Estos métodos para sumar o restar el valor de 1 al contador son pasados desde el componente padre al hijo.

import React, { Component } from 'react';

class ButtonContainer extends Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <button type="button" style={{ 'margin': 12 }}
            className="btn btn-primary"
            onClick={this.props.increment}
          >
            +
                                </button>

          <button type="button" style={{ 'margin': 12 }}
            className="btn btn-primary"
            onClick={this.props.decrement}
          >
            -
                                </button>
        </div>
      </div>
    );
  }
}

export default ButtonContainer;

A los eventos onClick de los botones son asignados los métodos pasados desde el componente padre.

Validación de props mediante el uso de PropTypes

La validación de props en React constituye un elemento importante en la prevención de errores y una forma de ordenar los datos en una aplicación. La práctica más común para realizar esta validación se realiza con el empleo de la biblioteca de JavaScript para React llamada PropTypes. Esta provee un conjunto de validaciones que son capaces de especificar los tipos de props que el componente necesita o espera. Para su empleo es necesario importar PropTypes en el proyecto como se observa:

import PropTypes from 'prop-types';

Algunos de las propiedades que se pueden validar son las de tipo: array, bool, function, number, object y string. Es posible precisar si una propiedad es requerida para el componente, entre otras características. Debajo del componente se realiza la validación de las propiedades y se establecen los valores por defecto de los mismos.

MiComponente.propTypes = {
  aObjecto: PropTypes.object,
  usuarioID: PropTypes.number.isRequired,
  nombre: PropTypes.string
};

MiComponente.defaultProps = {
  aObjecto: {},
  nombre: 'Mi Nombre por defecto'
}

Como se presenta, usuarioID es requerido para este componente. Mientras que para aObjeto y nombre sus valores por defecto son definidos.

En próximos artículos nuestro equipo de DevSun Europe seguirá profundizando en React, importante biblioteca de JavaScript.


Total de Vistas: 238

Publicaciones relacionadas

Like
Like Love Haha Wow Sad Angry
7

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Publicación recomendada
Scroll Up