Narzędzia React.Children

Wprowadzenie

Problem z bezpośrednimi metodami tablic

// Unsafe — crashes if children is a single element
children.map(c => ...);

// Safe
React.Children.map(children, c => ...);

React.Children.map

function List({ children }) {
  return (
    <ul>
      {React.Children.map(children, (child, i) => (
        <li key={i}>{child}</li>
      ))}
    </ul>
  );
}

React.Children.count

function RequiresTwo({ children }) {
  if (React.Children.count(children) !== 2) {
    throw new Error('Exactly two children required');
  }
  return <div>{children}</div>;
}

React.Children.toArray

function Reversed({ children }) {
  const arr = React.Children.toArray(children);
  return <>{arr.reverse()}</>;
}

React.Children.forEach

React.Children.forEach(children, child => {
  if (!React.isValidElement(child)) {
    console.warn('Non-element child found');
  }
});

React.Children.only

function SingleChild({ children }) {
  const child = React.Children.only(children);
  return React.cloneElement(child, { 'data-wrapped': true });
}

Sprawdzanie typów dzieci

React.Children.forEach(children, child => {
  if (child.type !== TabPanel) {
    throw new Error('Only TabPanel children allowed');
  }
});

React.Children a Array.from

Nowoczesna alternatywa: spłaszczanie za pomocą toArray

const items = React.Children.toArray(children);
const first = items[0];
const rest = items.slice(1);

Szybkie sprawdzenie

Podsumowanie

Następna lekcja