React.Children-Hilfsfunktionen

Willkommen

Das Problem mit direkten Array-Methoden

// 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 });
}

Child-Typen validieren

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

React.Children im Vergleich zu Array.from

Moderne Alternative: Mit toArray abflachen

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

Kurzer Test

Zusammenfassung

Als Nächstes