Saltar al contenido

Cómo pasar el objeto de utilería del componente hijo al componente padre

Normalmente empezamos con la sintaxis JSX en Reactar para dar alguna salida al navegador. Esencialmente, JSX es una mezcla de HTML y JavaScript e intenta sacar lo mejor de ambos lenguajes.

A continuación se presenta un ejemplo de un componente básico de React:

Cómo pasar el objeto de utilería del componente hijo al componente padre
Cómo pasar el objeto de utilería del componente hijo al componente padre
123456789101112importReact,{Componente}de$0027reaccionar$0027;classAppextendsComponente{render(){const hola =$0027Say Hello to learning Props/State in React!$0027;return(<div>h1;{hello}</h1;</div;);}}exportdefaultApp;

javascript

El componente anterior mostraría el mensaje, “Saluda a los aprendices de Atrezzo/Estado en Reacción!” en el navegador. Separemos eso en su propio componente HelloReact e invocémoslo desde el componente principal de la aplicación, como se muestra a continuación:

123456789101112131415161718importReact,{Componente}de$0027reaccionar$0027;classAppextendsComponente{render(){retorno(<div><HelloReact/ </div>);}}claseHelloReactextendsComponente{render(){const hola =$0027Say Hello to learning Props/State in React! $0027;return<h1;{hola}</h1;}}exportdefaultApp;

javascript

La siguiente pregunta que podemos tener es cómo pasar algunos datos como parámetros de un componente de Reactancia a otro, ya que querríamos que el componente mostrara datos dinámicos en lugar de datos estáticos. Aquí es donde los accesorios de React entrarían en escena. Pasamos los datos añadiendo algunos atributos HTML y asignamos los datos con JSX. También tenemos que añadir los corchetes.

Echemos un vistazo al siguiente código donde pasamos el mensaje de la aplicación al componente HelloReact:

1234567891011121314151617importReact,{Componente}de$0027reaccionar$0027;classAppextendsComponente{render(){const hello =$0027Decir hola al aprendizaje Props/State in React! $0027;return(<div><HelloReact hello={hello}/;/div;}}claseHelloReactextendsComponente{render(){regresar<h1;};{este.props.hello}</h1;};}}exportarAplicaciones por defecto;

javascript

Podemos ver que los accesorios se reciben en el componente HelloReact de React a través de esta instancia de nuestra clase HelloReact. Uno podría preguntarse por qué los accesorios no están disponibles en el método de representación. Si eso sucediera, se comportaría de manera similar a los componentes funcionales. Parece que el equipo de React consideró esa opción, pero aún no han actualizado el API para los componentes basados en la clase React. Con suerte, eso ocurrirá en algún momento en el futuro.

Veamos nuestro ejemplo utilizando un componente funcional en el que los puntales se reciben como argumentos en la firma de la función, como se muestra a continuación:

12345678910111213importReact,{Componente}de$0027reaccionar$0027;classAppextendsComponente{render(){const hello =$0027Decir hola al aprendizaje Props/State in React! $0027;return(<div><HelloReact hello={hello}/;/div;};}constHelloReact=props={;h1;};{props.hello}</h1;};;exportdefaultApp;

javascript

Dado que siempre tendremos los accesorios en nuestra firma de función y que casi siempre es el único objeto contenedor de nuestros datos, podemos desestructurar los accesorios dentro de la propia firma de función, como se muestra a continuación:

1constHelloReact=({hola })=[;h1};{hola}</h1};

javascript

Así podemos ver que los accesorios nos permiten pasar variables de un componente a otro, es decir, a lo largo de nuestro árbol de componentes. En el ejemplo anterior, los datos eran una variable de cadena. Sin embargo, los accesorios pueden ser cualquier tipo de datos: números enteros, objetos o incluso matrices. Incluso pueden ser componentes de React, como veremos más adelante en esta guía. También podemos definir estos accesorios en línea. Para las cadenas, podemos pasar los puntales usando comillas simples o comillas dobles (cualquiera de ellas debería funcionar). A continuación se muestra un ejemplo de cómo pasarlos en línea:

123456789101112importReact,{Componente}de$0027reaccionar$0027;classAppextendsComponente{render(){return(<div><HelloReact hello="¡Diga hola al aprendizaje Props/State in React! "ConstHelloReact"({ {hola })===;{hola}</h1;};;exportdefaultApp;

javascript

También podemos pasar cualquier otro tipo de estructura de datos como puntales en línea. Al pasar los objetos, la sintaxis puede ser un poco confusa inicialmente ya que tendremos dos llaves rizadas: una para representar nuestro JSX y otra para el objeto. Esto puede ser especialmente confuso cuando pasamos un objeto de estilo a un atributo de estilo. Echemos un vistazo a un ejemplo de cómo pasar un objeto a continuación:

123456789101112importReact,{Componente}de$0027reaccionar$0027;classAppextendsComponente{render(){return(<div><HelloReact hello={{{ texto:$0027¡Saluda a la formación Props/State in React!
javascript

Tenga en cuenta que lo anterior puede causar problemas de rendimiento porque cada vez que nuestro componente se renderiza, se crea un nuevo objeto cada vez. Sin embargo, para alguien que está empezando a aprender a reaccionar, eso debería estar bien.

Hemos visto cómo los accesorios pueden pasar a un componente de React. También podemos observar que los accesorios se pasan sólo del componente superior al inferior en nuestro árbol de componentes. Por lo tanto, parece que no hay manera de pasar los accesorios de un componente hijo a un componente padre. Veremos este tema más adelante. La otra cosa que podemos ver es que los accesorios de React son de sólo lectura, es decir, no tenemos ninguna manera de establecer accesorios (fue posible hacerlo antes). Este comportamiento tiene sentido porque el propósito de los accesorios es sólo pasar datos de un componente a otro, es decir, sólo de un componente padre a un componente hijo.