1

Me gustaría saber como puedo realizar lo siguiente en React JS utilizando componentes JSX. Crear un componente que pueda recibir dentro otro componente, por ejemplo el componente padre y el componente hijo tal que así:

<Padre>
    <Hijo description="Hello Word"/>
</Padre>

Y quede por ejemplo como:

<div class="padre">
    <div class="hijo">
        Hello World
    <div/>
<div/>
6
  • Para pasar datos de un componente a otro en React, como en tu ejemplo ese string Hello Word, se utilizan las props. 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. el 3 jun. 2021 a las 2:59
  • No en realidad, no es lo que estoy buscando :/ el 3 jun. 2021 a las 3:39
  • 1
    Vamos, quieres de un componente padre envie datos a un componente hijo?
    – Anki Jedi
    el 3 jun. 2021 a las 3:51
  • Pasa que es un poco difícil entender lo que necesitas porque el tipo de ejemplo que utilizas es un poco confuso. Si lo que estás buscando es pasar todo un componente dentro de otro componente, quizás podría servirte aprender a usar la prop 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. el 3 jun. 2021 a las 4:08
  • Eso si es lo que necesitaba, muchas gracias. el 3 jun. 2021 a las 4:34

1 respuesta 1

0

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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.