Empleo de Props en React

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

¿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:

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.