Propiedades en componentes React

  • Por
Explicaciones sobre qué son las propiedades, en el desarrollo de componentes React. Veremos varios métodos de usar propiedades en componentes.

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. Fíjate como los valores de mis propiedades 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.

Nota: Este tipo de componentes sencillos normalmente se conoce como "componentes sin estado". En un capítulo posterior veremos una contraposición entre los componentes con y sin estado.
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.

Nota: El uso de un componente definido con una función no difiere del uso de cualquier otro componente, simplemente que debido a que estamos usando una función no podemos almacenar estado en este componente. Volveremos sobre esto del estado más adelante.

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>
    )
  }
})

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir