👶 Uso de props children para componentes reutilizables en 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