Pasar props a los niños en React

1. Pasar props a los niños en React
2. Pasar props a los niños en React mediante la API Context
3. Pasar props a los niños en React usando React.cloneElement()

Los desarrolladores de React confían en la reutilización de componentes para crear aplicaciones potentes pero fáciles de mantener.

La biblioteca de reacciones presenta un modelo de composición, que se suma a la flexibilidad de utilizar componentes reutilizables. En algunas situaciones, no puede predecir cuáles serán los elementos secundarios de sus componentes.

Por ejemplo, al crear una aplicación de mensajería, su cuadro de diálogo puede incluir emojis y un fragmento de texto.

React proporciona una función props.children para aumentar la reutilización de los componentes. Para decirlo en palabras simples, los desarrolladores de React pueden usar this.props.children para mostrar los valores (generalmente elementos de la interfaz de usuario) colocados entre las etiquetas de apertura y cierre de un componente principal.

Pasar props a los niños en React

Imaginemos que tienes elementos de niños que recibes a través de props.children. Para mostrarlos, debe incluir props.children o this.props.children (para componentes de clase) en su declaración return.

Aquí hay un ejemplo con tres componentes: el componente principal App en la parte superior y un componente Box con un componente secundario Text. Vamos a ver:

class App extends Component {
  render() {
    return <Box>
            <Text></Text>
           </Box>;
  }
}

class Box extends Component {
  render() {
    return <div>{this.props.children}</div>;
  }
}
class Text extends Component {
  render() {
    return <p>Welcome to App</p>;
  }
}

Pero, ¿qué pasa si necesita pasar apoyos adicionales a los elementos o componentes incluidos en props.children? En nuestro ejemplo, es posible que necesitemos especificar una propiedad de color o fontSize para nuestro texto.

Exploremos dos excelentes opciones para hacer esto.

Pasar props a los niños en React mediante la API Context

Context le permite pasar props a un árbol completo de componentes. Es extremadamente útil porque tiene un componente App en la parte superior pero desea pasar un controlador de eventos a un componente secundario en la parte inferior del árbol.

Puede transmitirlo manualmente, pero llevará mucho tiempo y será difícil de rastrear. En su lugar, puede utilizar Context para que el valor esté disponible en cada componente secundario.

Técnicamente, Context no es lo mismo que props, pero hace el trabajo en nuestra situación. Para hacer esto, usaremos el método React.createContext(), disponible en todas las aplicaciones React.

Primero, definimos una variable para almacenar una instancia de Context:

import React, { Component } from 'react';
import { render } from 'react-dom';
const SampleContext = React.createContext()
class App extends Component {
  render() {
    return <Box>
            <Text></Text>
           </Box>;
  }
}

Tenga en cuenta que la variable se crea fuera del alcance de los componentes de la clase.

Buscamos el componente que muestra this.props.children y lo envolvemos con un <SampleContext.Provider>. Todo lo que esté entre las etiquetas de apertura y cierre del envoltorio tendrá acceso a los valores que definamos.

Luego especificamos el valor:

class Box extends Component {
  render() {
    return <SampleContext.Provider value={{color: "red"}}>
          {this.props.children}
          </SampleContext.Provider>;
  }
}

Ahora, vamos al componente que se está transmitiendo como this.props.children y establecemos la propiedad contextType igual a la variable que creamos inicialmente:

class Text extends Component {
  static contextType = SampleContext
  render() {
    return <p style={{color: this.context.color}}>Welcome to App</p>;
  }
}

Una vez que hacemos eso, podemos acceder a los valores desde Context. En este caso, definimos un objeto de estilo en línea y establecemos la propiedad color en this.context.color, rojo.

El texto es de hecho rojo, como se ve en el código de reproducción. Puede intentar editar el código usted mismo agregando o eliminando propiedades en el Context y ver si funciona.

Pasar props a los niños en React usando React.cloneElement()

Alternativamente, también puede usar el método cloneElement() para agregar props personalizados a los elementos o componentes en sus props.children. Veamos y asimilemos un ejemplo:

<>{React.cloneElement(props.children, {color: "red"})}</>

En nuestro ejemplo, el método toma dos argumentos. Primero, debemos pasarle props.children, que utilizará como punto de partida para la clonación. Esto significa que el elemento clonado tendrá todos los props del original.

El método cloneElement() también conserva las referencias, que son importantes al interactuar con DOM.

Como segundo argumento, debemos pasar todos los props adicionales que queremos que reciba el componente. En este caso, pasaremos una props color con el valor "red".