Props Children React

馃懚 Uso de props children para componentes reutilizables en React

En React, props.children permite que un componente reciba contenido din谩mico entre sus etiquetas de apertura y cierre. Esto es 煤til para crear componentes contenedores o reutilizables sin conocer de antemano el contenido exacto que tendr谩n.

1️⃣ Ejemplo b谩sico de props children

Supongamos un componente Card que puede envolver cualquier contenido: 

function Card(props) {
  return (
    <div className="card">
      {props.children}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <Card>
    <h2>T铆tulo de la tarjeta</h2>
    <p>Este es un contenido dentro del componente Card.</p>
  </Card>
);

T铆tulo de la tarjeta

Este es un contenido dentro del componente Card.

2️⃣ Desestructurando children

Podemos desestructurar los props directamente para extraer children y hacer el c贸digo m谩s limpio: 

function Card({ children }) {
  return <div className="card">{children}</div>;
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <Card>
    <h2>Otro ejemplo de Card</h2>
    <p>Contenido din谩mico usando children.</p>
  </Card>
);

Otro ejemplo de Card

Contenido din谩mico usando children.

3️⃣ Ventajas de usar props children

  • ✅ Permite que un componente sea reutilizable con cualquier contenido.
  • ✅ Facilita la composici贸n de componentes en React.
  • ✅ Evita pasar props adicionales solo para renderizar contenido interno.
  • ✅ Compatible con cualquier tipo de JSX dentro del componente.

4️⃣ Ejemplo avanzado: Componente contenedor con estilo

function Panel({ title, children }) {
  return (
    <div className="panel">
      <h3>{title}</h3>
      <div>{children}</div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <Panel title="Panel de ejemplo">
    <p>Este panel puede contener cualquier cosa.</p>
    <button>Click aqu铆</button>
  </Panel>
);

Panel de ejemplo

Este panel puede contener cualquier cosa.

← Volver al 铆ndice