Volver a lo básico: ¿Qué son las propiedades en React y cómo funcionan?

Si ya está familiarizado con el funcionamiento de las funciones de argumentos en JavaScript, comprenderaccesorios¡Es muy fácil! En ​​pocas palabras, propsse utilizan para pasar datos de un componente principal a un componente secundario en React y son el mecanismo principal para la comunicación entre componentes. Por lo tanto, en esencia, las propiedades son una parte importante de lo que permite que funcione el patrón de componentes de React.

Como ocurre con la mayoría de los grandes inventos, siempre hay una idea básica sencilla que mantiene todo unido. En React, se podría decir que es laaccesoriossistema que le permite tratar los componentes de React como funciones de JavaScript.

Propiedades === Parámetros de función

¿Qué dirías si te dijera que ya sabes qué son los “props”? Pues si sabes JavaScript… ¡Lo sabes!

Considere esta función de JavaScript simple:

function Greeter(name) {  return 'hello ' +name;}

Tiene un único parámetro llamado name. Pasar distintos argumentos al parámetro produce distintos resultados:

Greeter('world')// -- "hello world"Greeter('dolly')// -- "hello dolly"Greeter('its me')// -- "hello its me"

¿Cómo se relaciona esto con React?

Puedes pensar en un componente React como una función de JavaScript. Creemos un componente React para ilustrar este punto:

function Greeter(props) {  return phello {props.name}/p };

E invocando el Greeter/componente…

function App() {  return (    div      h1HELLO APP/h1      Greeter name="world"/  {/*   "world" is the prop value*/}    /div  )};

Acabas de pasar un valor de propiedad a Greeter/y ahora el Greetercomponente tendrá acceso al valor de la namepropiedad. Eso, en pocas palabras, es todo.accesorios¡son! En lugar de invocar Greeterasí:

Greeter('some value');// -- "some value"

Lo invocas con esta sintaxis estilo HTML llamada JSX:

Greeter name="some value"/// -- phello some value/p

Y Greeterobtiene acceso a los accesorios que se le pasan de la siguiente manera:

import React from 'react';function Greeter(props) {  return (    phello {props.name}/p  )}export default Greeter;

Esta sintaxis de pasar propiedades en React proviene del mundo HTML, donde los atributos se utilizan para otorgar ciertas "propiedades" a un elemento HTML... De ahí la palabra abreviadaaccesorios

Hasta ahora solo hemos usado cadenas, peroaccesoriosPuede tomar cualquier tipo nativo de JavaScript (por ejemplo, matrices, valores booleanos, literales de objetos, funciones).

Como recién llegado a React, es posible que tenga la tentación de pensar enaccesorioscomo algo totalmente nuevo y extraño. En lugar de eso, trate de pensar en ellos simplemente como argumentos que está proporcionando a una función... porque en esencia eso es todo lo que son.

Consulta la documentación oficial de React para obtener más información sobre las “props”.