Uno de los recursos elementales que tenemos al desarrollar componentes React son las propiedades. Nos sirven básicamente para cargar de datos a los componentes, de modo que éstos puedan personalizar su comportamiento, o para transferir datos de unos componentes a otros para producirse la interoperabilidad entre componentes. Existen diversas maneras de pasar propiedades, aunque lo más común es hacerlo de manera declarativa, al usar el componente dentro del código JSX.

Ya hemos visto en el Manual de React que existen diversas maneras de implementar componentes, y todavía veremos otras formas. En este caso es importante porque, dependiendo de cómo hemos definido los componentes en React, las propiedades nos llegarán por parámetros o como atributos de objeto. Analizaremos ambos casos en este artículo. Observarás que es muy sencillo compartir información y aprender a personalizar el comportamiento de los objetos.

Propiedades en componentes definidos mediante clases

Comenzaremos observando cómo usar propiedades en componentes que hemos definido mediante clases de ES6, ya que es un conocimiento más fresco, que aprendimos justo en el anterior artículo, dedicado a la creación de componentes usando ECMAScript 2015.

Al usar clases, las propiedades enviadas al componente (enseguida mostraremos cómo usar el componente y enviarle las propiedades) las vamos a recibir en forma de propiedades o atributos del objeto. Por tanto accedemos a ellas a través de "this". En concreto usaremos this.props para acceder a un objeto donde tenemos todas las propiedades definidas como atributos.

Imaginemos que a nuestro componente le pasamos dos propiedades, llamadas "nombre" y "app". Entonces podremos usar esas propiedades de la siguiente manera:

import React, { Component } from 'react';


export default class FeedbackMessage extends Component {
    render() {
        return (
            <div>
                Bienvenido {this.props.nombre} a {this.props.app}
            </div>
        )
    } 
}

El único detalle nuevo aquí es que estamos usando propiedades: this.props.nombre contendrá el valor pasado en la propiedad "nombre" y this.props.app el valor de la propiedad "app".

También es destacable el hecho de que nuestras propiedades se encuentran encerradas entre llaves. Las llaves son importantes, porque es la manera con la que se escapa un código JSX, permitiendo colocar dentro sentencias Javascript "nativo". Dicho de otra manera, al colocar las llaves estamos abriendo la posibilidad de escribir sentencias Javascript. Aquello que devuelvan esas sentencias se volcará como contenido en la vista.

Cómo pasar propiedades a los componentes

A la hora de usar un componente podemos enviarle propiedades con sus valores. Es una operación que se hace comúnmente de forma declarativa en el código JSX, cuando usamos un componente.

Cada propiedad se indica como si fuera un atributo del HTML, al que le indicamos su valor. Este sería un código donde se usa el componente FeedbackMessage, indicando los valores de sus propiedades. Fíjate como los valores son indicados como atributos del componente "nombre" y "app", que son las propiedades usadas en el ejemplo anterior.

import React, { Component } from 'react'
import FeedbackMessage from './FeedbackMessage'


class App extends Component {
  render() {
    return (
      <div className="App"> 
        <FeedbackMessage nombre="Miguel Angel Alvarez" app="Mi App React" />
      </div>
    );
  }
}

Propiedades en componentes generados a partir de funciones

Otro modo de definir este tipo de componentes sencillos es por medio de simples funciones, lo que dulcifica bastante la sintaxis de implementación de un componente. En este caso las propiedades se recibirán por parámetro en la función que implementa el componente.

import React from 'react'


export default function (propiedades){
  return (
    <div>
      <p>Soy una función!</p>
      <p>Hola {propiedades.nombre}, estás en {propiedades.app}</p>
    </div>
  )
}

Observarás que al hacer el import ya no necesitamos traernos la clase Component, sino solamente React.

Luego, al definir la función se prescinde del método render, porque no estamos haciendo una clase. La propia función es el equivalente al método render() que teníamos al crear componentes por medio de una clase ES6. Por lo tanto, devuelve el JSX para representar el componente.

En lo que respecta al uso de propiedades debes observar que te llegan mediante un parámetro.

export default function (propiedades){

Al parámetro le he llamado "propiedades", pero como es un simple parámetro tú podrás llamarlo como quieras. Algo más común sería usar el nombre "props" que es como React las nombra habitualmente. He usado una palabra en español justamente para remarcar que, al ser un parámetro, yo le puedo poner el nombre que desee.

Luego accederás a esas propiedades con el nombre que hayas puesto a tu parámetro, seguido de un punto y el nombre de la propiedad.

Hola {propiedades.nombre}, estás en {propiedades.app}

Como antes, para volcar datos que viene de Javascript dentro de un JSX, usamos la notación de las llaves.

Ya que estamos en ES6, podríamos perfectamente usar las conocidas "arrow functions" para definir este componente. La sintaxis todavía quedará más resumida!

export default propiedades => (
  <div>
    <p>Soy una arrow function!</p>
    <p>Hola {propiedades.nombre}, estás en {propiedades.app}</p>
  </div>
)

Propiedades de componentes creados con createClass()

Si utilizamos la alternativa tradicional de creación de componentes React con createClass(), el uso de propiedades también se hace por medio de la referencia "this.props".

var FeedbackMessage = React.createClass({
  render: function() {
    return (
      <div>
        <p>Soy un componente con createClass()</p>
        <p>También puedo usar propiedades {this.props.nombre} y {this.props.app}</p>
      </div>
    )
  }
})

Conclusión a las propiedades en React

Ya conoces lo básico sobre las propiedades. Las hemos podido usar hasta de tres maneras distintas:

• En componentes definidos mediante clases ES6.
• En componentes sencillos, sin estado, definidos mediante una función.
• En componentes definidos con React.createClass.

Al final, las diferencias de trabajo con propiedades son mínimas, pero es importante que conozcas cada alternativa, porque seguramente te las encuentres en tu día a día desarrollando con React.

También vimos el modo de pasar valores a las propiedades de un componente en particular. La manera más habitual es mediante atributos en la etiqueta, de manera declarativa.

En el siguiente artículo comenzaremos a hablar con detalle de algo fundamental para poder entender el desarrollo con React, como es el estado de los componentes.