React Academy · Lekcja

Podstawy props.children

Przekazuj JSX jako children, renderuj pojedyncze i wiele elementów potomnych oraz warunkowo je wyświetlaj

Podstawy props.children to bezpłatna lekcja React Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Wprowadzenie

W tej lekcji opanują Państwo przekazywanie JSX jako dzieci, renderowanie pojedynczych i wielu dzieci oraz warunkowe renderowanie dzieci w komponentach React.

Właściwość children

Dowolny kod JSX umieszczony między otwierającym a zamykającym znacznikiem komponentu jest automatycznie dostępny jako `props.children`. W ten sposób tworzy się komponenty opakowujące lub komponenty układu.

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

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

Pojedyncze a wiele dzieci

Po przekazaniu jednego dziecka `children` jest elementem React. Po przekazaniu wielu dzieci `children` jest tablicą. Zachowanie zmienia się w zależności od liczby przekazanych dzieci.

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

Bezpośrednie renderowanie dzieci

Najprostsze zastosowanie children polega na bezpośrednim renderowaniu ich wewnątrz JSX. Komponent nadrzędny kontroluje układ i style, a komponent korzystający kontroluje zawartość.

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

Warunkowe renderowanie dzieci

Przed renderowaniem należy sprawdzić, czy przekazano children. Komponent może wyświetlić zawartość zastępczą, jeśli nie dostarczono żadnych dzieci.

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

Dzieci jako render prop

Children może być również **funkcją** (wzorzec render prop). Komponent nadrzędny wywołuje ją z danymi, a komponent korzystający kontroluje renderowanie. Jest to starszy wzorzec — obecnie często zastępują go własne hooki.

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

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

Przekazywanie dzieci jako właściwości

Children nie musi korzystać ze specjalnego slotu `{children}`. Kod JSX można przekazać za pomocą dowolnej nazwy właściwości. To podstawa nazwanych slotów.

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

Domyślne dzieci

Domyślne children można zdefiniować za pomocą składni domyślnego parametru JavaScript przy destrukturyzacji. Jeśli komponent nadrzędny niczego nie przekaże, zostanie wyświetlona domyślna zawartość.

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

Fragmenty i wiele dzieci

Aby zwrócić wiele elementów bez opakowującego elementu div, należy użyć `React.Fragment` lub skróconej składni `<>...`. Jest to przejrzyste rozwiązanie w komponentach układu, gdy dodatkowy węzeł DOM zakłócałby działanie CSS.

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

TypeScript: typowanie dzieci

W TypeScript należy użyć `React.ReactNode` do typowania children — akceptuje on elementy, ciągi znaków, liczby, tablice, null i undefined.

interface Props {
  children: React.ReactNode;
}

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

Szybkie sprawdzenie

Jaki typ ma props.children po przekazaniu wielu elementów JSX między znacznikami komponentu?

Podsumowanie

Właściwość props.children przechowuje dowolny kod JSX przekazany między znacznikami. Pojedyncze dzieci są elementem, a wiele dzieci jest tablicą. W przypadku opcjonalnych dzieci należy stosować sprawdzanie warunkowe, a w przypadku nazwanych slotów — nazwane props.

Następna lekcja

Następna lekcja: **Narzędzia React.Children** — zostaną użyte React.Children.map, count i toArray do bezpiecznego modyfikowania dzieci niezależnie od ich typu i liczby.

Często zadawane pytania

Czy lekcja „Podstawy props.children” jest bezpłatna?

Tak — pełny tekst „Podstawy props.children” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Podstawy props.children”?

Przekazuj JSX jako children, renderuj pojedyncze i wiele elementów potomnych oraz warunkowo je wyświetlaj Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Podstawy props.children”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Podstawy props.children
Narzędzia React.Children
Nazwane sloty za pomocą propsów obiektowych
Klonowanie i wstrzykiwanie propsów za pomocą cloneElement

← Powrót do React Academy