Para usar todo el contenido de un componente dentro de otro componente podemos usar la prop children
.
Usarla es más fácil de lo que parece.
Simplemente rodeamos de la etiqueta <Padre>
al componente <Hijo />
y luego desde el componente <Padre>
recibimos todos los datos del <Hijo />
que se guardarán en la prop children
.
Por ejemplo:
const App = () => {
return (
<div className="App">
<Padre>
<Hijo />
</Padre>
</div>
);
}
const Hijo = () => {
return (
<div className="App">
<p>Hello world</p>
</div>
);
}
const Padre = ({children}) => {
return (
<div className="App">
<h3>
Mostrando contenido de "Hijo" desde "Padre":
{children}
</h3>
</div>
);
}
// Render it
ReactDOM.render(
<App />,
document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>
Ahí desde el componente App
, usamos a <Padre>
pasándole el valor de <Hijo />
que en este caso es el párrafo que dice "Hello world".
De esa forma, mediante children
, en el componente <Padre>
recibimos ese "Hello world" que viene de <Hijo />
y lo imprimimos dentro de un <h3>
.
Ejecuta el código, y mira ese resultado.
Hello Word
, se utilizan lasprops
. No son muy difíciles de usar, acá en esta documentación se explica cómo funcionan React Props. No sé si es eso lo que estás buscando.children
. Acá hay otro articulo y un video que explican cómo usarla: Children en React. A lo mejor eso se acerca más a la respuesta a tu pregunta.