Props — JS: React

• Operador de expansión
• Props por defecto

Sin el uso de datos, algunos componentes pueden ser inútiles en la práctica. Por ejemplo, un componente puede renderizar un texto específico que podría cambiar. Crear un componente propio para cada caso específico con el texto necesario no es la mejor idea. Sin mencionar que, en la mayoría de los casos, esto simplemente no es posible, ya que el texto puede ser dinámico.

Es posible pasar datos a los componentes utilizando props:

Ver el Pen js_react_props de Códica (@hexlet) en CodePen.

Como puedes ver, los props se pasan como atributos en HTML y están disponibles dentro del componente a través del objeto props. Esta forma de pasar datos de entrada no debería ser nueva para ti. Los componentes integrados también aceptan props, como className y otros.

const vdom = (
  <div className="row">
    <div className="col-6">
      <HelloMessage name="Kate" />
    </div>
    <div className="col-6">
      <HelloMessage name="Mark" />
    </div>
  </div>
);

Los props son un mecanismo muy simple para pasar datos a los componentes que generalmente no causa ninguna dificultad. Lo más importante que debes recordar al trabajar con props es que no se pueden modificar. En primer lugar, esto no conducirá a nada debido al principio de funcionamiento de React, y en segundo lugar, React tiene un mecanismo completamente diferente para trabajar con estados modificables, que se discutirá más adelante.

Operador de expansión

Al trabajar con props, a menudo es necesario pasar muchos parámetros o estos parámetros están presentes en el código como un objeto. En este caso, puedes simplificar la transmisión utilizando el operador de expansión (spread operator).

const params = {
  className: 'row',
  title: 'name',
};
const name = 'Eva';
const vdom = <div id="container" {...params}>
  Hola, {name}
</div>;

El código anterior es equivalente al siguiente ejemplo:

const name = 'Eva';
const vdom = <div id="container" className="row" title="name">
  Hola, {name}
</div>;

Props por defecto

Otra tarea con la que se encuentran los desarrolladores es establecer valores predeterminados para los props (para casos en los que algunos props no se pasan). La forma más sencilla de hacerlo es establecerlos directamente dentro de la función render, utilizando el siguiente enfoque:

const title = this.props.title || '¡Hola!';

Esto funcionará, pero puede causar problemas de rendimiento, un tema que se discutirá en detalle en una de las últimas lecciones.

En React, hay una forma de establecer valores predeterminados para los props. Ejemplo:

class Header extends React.Component {
  render() {
    const { text } = this.props;
    return (
      <h1>{text}</h1>
    );
  }
}

Header.defaultProps = {
  text: '¡Hola, mundo!',
};