React Academy · Lección

Fundamentos de props.children

Pase JSX como children, renderice uno o varios children y controle su renderizado condicional.

Fundamentos de props.children es una lección gratuita de React Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

Bienvenida

En esta lección aprenderá a pasar JSX como children, representar un único child frente a varios y representar children de forma condicional en componentes de React.

La prop children

Cualquier JSX colocado entre las etiquetas de apertura y cierre de un componente está disponible automáticamente como `props.children`. Así se crean componentes contenedores o de diseño.

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

// Usage
<Card><p>Hello world</p></Card>

Un único child frente a varios

Cuando pasa un único child, `children` es un elemento de React. Cuando pasa varios children, `children` es un array. El comportamiento cambia según la cantidad de children que se pasen.

<Card>One child</Card>          // children is a string
<Card><p>A</p><p>B</p></Card>  // children is an array

Representar children directamente

El uso más sencillo de children consiste en representarlos directamente dentro de JSX. El padre controla el diseño y los estilos; el consumidor controla el contenido.

function Section({ title, children }) {
  return (
    <section>
      <h2>{title}</h2>
      <div className="content">{children}</div>
    </section>
  );
}

Representación condicional de children

Compruebe si se ha pasado children antes de representarlo. Un componente puede proporcionar un contenido alternativo si no se proporciona ningún child.

function Panel({ children }) {
  if (!children) return <p>Nothing to show</p>;
  return <div className="panel">{children}</div>;
}

Children como render prop

Children también puede ser una **función** (patrón render prop). El padre la llama con datos y el consumidor controla la representación. Este es un patrón antiguo; hoy en día, los custom hooks suelen sustituirlo.

function DataLoader({ children }) {
  const data = useFetchData();
  return children(data); // consumer receives data
}

<DataLoader>{data => <ul>{data.map(...)}</ul>}</DataLoader>

Pasar children como prop

Children no tiene que utilizar el slot especial `{children}`. Puede pasar JSX mediante cualquier nombre de prop. Esta es la base de los slots con nombre.

function Layout({ header, footer, children }) {
  return (
    <div>
      <header>{header}</header>
      <main>{children}</main>
      <footer>{footer}</footer>
    </div>
  );
}

Children predeterminados

Puede proporcionar children predeterminados mediante la sintaxis de parámetros predeterminados de JavaScript en la desestructuración. Si el padre no pasa nada, se muestra el contenido predeterminado.

function Button({ children = 'Click me' }) {
  return <button>{children}</button>;
}

Fragmentos y varios children

Para devolver varios elementos sin un div contenedor, utilice `React.Fragment` o la forma abreviada `<>...`. Esto resulta limpio en componentes de diseño donde un nodo DOM adicional rompería el CSS.

function Row({ children }) {
  return <>{children}</>;
}

TypeScript: tipado de children

En TypeScript, utilice `React.ReactNode` para tipar children; acepta elementos, cadenas, números, arrays, null y undefined.

interface Props {
  children: React.ReactNode;
}

function Box({ children }: Props) {
  return <div>{children}</div>;
}

Comprobación rápida

Cuando pasa varios elementos JSX entre las etiquetas de un componente, ¿qué tipo tiene props.children?

Repaso

props.children contiene cualquier JSX pasado entre etiquetas. Un único child es un elemento; varios children forman un array. Utilice comprobaciones condicionales para los children opcionales y props con nombre para los slots con nombre.

A continuación

Siguiente lección: **React.Children Utilities**; utilizará React.Children.map, count y toArray para manipular children de forma segura, independientemente de su tipo o cantidad.

Preguntas frecuentes

¿La lección «Fundamentos de props.children» es gratis?

Sí — el texto completo de «Fundamentos de props.children» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Fundamentos de props.children»?

Pase JSX como children, renderice uno o varios children y controle su renderizado condicional. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Fundamentos de props.children»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Fundamentos de props.children
Utilidades de React.Children
Slots con nombre mediante props de objeto
Clonación e inyección de props con cloneElement

← Volver a React Academy