Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de React Props: Ejemplo de niños

 React es una biblioteca de interfaz de usuario popular para crear interfaces de usuario con componentes y renderizarlas usando un DOM virtual.

Básicamente, crea su aplicación React como un árbol de componentes con un componente raíz principal (generalmente llamado App) y componentes secundarios.

¿Qué es React Props?

La mayoría de las veces, los componentes necesitan comunicarse entre sí pasando datos de un componente a otro o de un componente principal en el árbol.

Puede pasar datos a un componente secundario a través de sus accesorios, que es la abreviatura de propiedades .

Ejemplo de uso del objeto React Props

Cada componente posee un propsobjeto que contiene las propiedades que se pasan de un componente principal.

Tomemos un ejemplo sencillo.

En este ejemplo asumimos que ya tiene un proyecto de React listo.

Creación de un componente Child React: la propiedad props children

Comencemos creando un componente secundario de React que se usará en el Appcomponente principal .

En la src/carpeta, cree un Header.jsarchivo y el siguiente código:

import React from 'react';

class Header extends React.Component {
    render() {
        return (
            <header role="banner">
                {this.props.children}
      </header>
        );
    }
}

export default Header;

Usamos la childrenpropiedad de this.propspara mostrar el contenido que existe entre la etiqueta de apertura y cierre cuando se invoca un componente. En este caso, nuestro Headercomponente.

De acuerdo con los documentos de React , puede usar this.props.childrencomponentes que se pueden usar como cajas genéricas que no conocen a sus hijos con anticipación.

A continuación, abra el src/App.jsarchivo, importe el componente Encabezado y actualice el render()método de la siguiente manera:

import React from 'react';
import Header from 'Header.js';

class App extends React.component{

    render() {
        return (
      <Header>
        <h1>This is the header</h1>
      </Header>
        );
    }
}
export default App;

Creación de un segundo componente secundario de React: pasar datos a través de accesorios

A continuación, creemos un segundo componente React llamado Mainque también se invocará desde el Appcomponente.

Cree un Main.jsarchivo y agregue el siguiente código:

import React from 'react';

class Main extends React.Component {
    render() {
        return (
            <div>
        <h2>{ this.props.title } </h2>
        <p>
        { this.props.bodyText }
        </p>
      </div>
        );
    }
}

export default Main;

El componente principal espera dos accesorios, titlebodyTextque deben pasarse desde el componente principal.

A continuación, invoquemos el Maincomponente del Appcomponente.

Abra el src/App.jsarchivo y actualícelo en consecuencia:

import React from 'react';
import Header from 'Header.js';
import Main from 'Main.js';


class App extends React.component{

    render() {
        return (
      <Header>
        <h1>This is the header</h1>
      </Header>
      <Main title='This is a the main section' bodyText='Hello World!'>
      </Main>
        );
    }
}
export default App;

Importamos e invocamos el Maincomponente y pasamos valores a titlebodyTextprops.

Como hemos visto, podemos acceder a los datos pasados ​​desde el componente secundario utilizando el propsobjeto.

Accesorios y componentes funcionales de reacción

En un componente funcional, puede acceder al objeto de accesorios de la siguiente manera:

const Header = (props) =>{
  return (
            <header role="banner">
                { props.children }
      </header>
        );
}

El propsobjeto se pasa como parámetro al componente, por lo que no es necesario utilizarlo this.

Resumen de React Props

En este tutorial hemos aprendido sobre los accesorios de React.

Hemos creado dos componentes secundarios del Appcomponente: encabezado y principal.

El Headercomponente representa lo que exista entre la etiqueta de apertura y cierre utilizando la childrenpropiedad del propsobjeto.

El Maincomponente muestra un título y un texto como cuerpo usando los accesorios titlebodyText.

Publicar un comentario

0 Comentarios