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: 1.023
Like
Like Love Haha Wow Sad Angry
7

You may also like

 

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