Cómo pasar props a los elementos hijos en React

Los componentes de React pueden mostrar, mediante props.children, el contenido anidado entre sus etiquetas. Mostrar ese contenido no añade automáticamente props a los elementos que contiene. Para compartir un valor con los componentes descendientes, usa Context; para añadir una prop a un elemento hijo concreto, usa React.cloneElement().

Por ejemplo, un cuadro de diálogo de mensajería puede recibir texto, un emoji o una combinación de elementos. El componente reutilizable no necesita conocer ese contenido de antemano: puede mostrar props.children donde corresponda dentro del cuerpo del diálogo.

Cómo pasar props a los elementos hijos en React

Un componente contenedor puede mostrar el contenido anidado devolviendo {children} dentro de su marcado. Por ejemplo, function Box({ children }) { return <div>{children}</div>; } muestra lo que el componente padre coloca entre <Box> y </Box>. El padre puede combinarlo con un componente hijo, como en function App() { return <Box><Text /></Box>; }.

Esa composición pasa el elemento Text a Box como la prop children; no establece una prop color en Text. Si el componente hijo necesita un valor, pásaselo explícitamente al crearlo, por ejemplo, con <Text color="red" />, o elige uno de los enfoques siguientes si el contenedor debe proporcionárselo.

Estos fragmentos de JSX ilustran cómo se conectan los componentes y presuponen que React está disponible en la aplicación; no son archivos independientes ni representan una salida obtenida al ejecutar el código. El componente hijo puede leer el valor con una firma de función como function Text({ color }) { return <p style={{ color }}>Welcome to App</p>; }. El texto visible del ejemplo, «Welcome to App», se conserva en inglés.

Cómo pasar props a los elementos hijos en React con la API Context

Usa Context cuando varios componentes de una misma rama necesiten el mismo valor y pasarlo por cada componente intermedio añada conexiones innecesarias. Context pone un valor a disposición de los consumidores que están debajo de su proveedor; es independiente de las props y no pasa literalmente una prop por cada componente.

Crea un contexto, por ejemplo, con const ColorContext = React.createContext("black");, y coloca un proveedor alrededor del contenido que necesita el valor: <ColorContext.Provider value="red">{children}</ColorContext.Provider>. Un componente descendiente puede leerlo con const color = React.useContext(ColorContext); y aplicarlo, por ejemplo, con <p style={{ color }}>Welcome to App</p>. El valor del proveedor está disponible para los componentes que se renderizan dentro de él, así que mantenlo alrededor de la rama que lo necesita. El valor predeterminado solo se usa cuando no hay un proveedor coincidente por encima del consumidor. Si existe uno, el consumidor recibe el valor que proporciona, incluso si es undefined, en lugar del valor predeterminado. El texto visible «Welcome to App» de este ejemplo se conserva en inglés.

Este enfoque sirve para valores que usan varios componentes descendientes, como un tema o una configuración regional. Si un solo componente hijo necesita un valor adicional, clonarlo puede ser más directo.

Cómo pasar props a los elementos hijos en React con React.cloneElement()

React.cloneElement() crea un elemento nuevo a partir de un elemento válido de React y un conjunto de props. Un contenedor puede usar React.cloneElement(children, { color: "red" }) para añadir o sobrescribir color en un componente hijo, conservando sus demás props. Después, el componente hijo puede usar color, como en el ejemplo de Text anterior.

Este enfoque requiere que children sea un único elemento válido de React. En cambio, props.children puede ser texto, varios elementos o tener otra estructura. Por eso, comprueba o gestiona su estructura antes de llamar a React.cloneElement(); no se puede pasar texto arbitrario ni varios componentes hijos a esta forma de un solo elemento como si fueran un único elemento. Si el contenedor debe admitir contenido variado, muéstralo sin modificarlo o usa Context cuando varios componentes descendientes necesiten compartir un valor.

Elige Context para un valor que se use en toda una rama. Elige React.cloneElement() cuando el contenedor deba modificar intencionalmente un elemento hijo concreto. Ninguno de estos enfoques cambia la función básica de props.children: representa el contenido anidado que proporciona el componente padre.