# Patrón "Slots"
Si se puede encontrar una manera de fusionar la estructura de la aplicación y aprovechar la prop de hijos (*children*), puede conducirse a un código más limpio sin tener que recurrir a la perforación profunda, Context o cualquier otra cosa.
La prop children es una buena solución para componentes que necesitan ser marcadores de posición genéricos, como Nav, Sidebar y Body en el ejemplo anterior. También se pueden pasar elementos JSX a cualquier props, no solo a "children", por lo que si se necesita más de un "slot" para conectar componentes, tenerlo en cuenta.
Aquí el mismo ejemplo basado en el anterior, reescrito para que Nav y Sidebar acepten prop children y lo representen como están. También el componente Body no toma la prop "children", pero tiene dos "slots" que muestra en la página. Escrito de esta manera, el componente App de nivel superior simplemente puede representar lo que necesita, utilizando los datos que ya tiene dentro del alcance, sin tener que pasar datos a más de un nivel.
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
const UserAvatar = ({ user, size }) => (
);
const UserStats = ({ user }) => (
{user.name}
{user.followers} Followers
Following {user.following}
);
// Aceptar children y renderizarlos
const Nav = ({ children }) => (
{children}
);
const Content = () => (
main content here
);
// Aceptar children y renderizarlos
const Sidebar = ({ children }) => (
{children}
);
// Body necesita una barra lateral y contenido, pero
// escrito de esta manera, pueden ser CUALQUIER COSA
const Body = ({ sidebar, content }) => (
}
content={ }
/>
);
}
}
ReactDOM.render(
,
document.querySelector('#root')
);
```
Sin embargo, si la aplicación es más compleja, podría ser difícil descubrir cómo adaptar el patrón de los children y slots de esta manera.
En sección siguiente se verá cómo se puede reemplazar la perforación de props y el patrón de esta sección con la API Context.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://zeroidentidad.gitbook.io/react-puro-19/15-api-context/patron_slots.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.