Comment transmettre efficacement des accessoires à « this.props.children » dans React ?

Comment transmettre des accessoires à {this.props.children}

Le but de cette question est de clarifier la manière appropriée de transmettre des accessoires à tous les enfants dans un emballage composant qui utilise {this.props.children} pour le rendu.

Clonage d'enfants avec de nouveaux accessoires

Une approche implique l'utilisation de React.Children, qui parcourt chaque élément enfant et les clone avec de nouveaux accessoires via React.cloneElement. Cependant, cette méthode est généralement déconseillée car elle peut conduire à un code fragile.

Pour illustrer, considérons le code suivant :

const Child = ({ childName, sayHello }) => (
  <button onClick={() => sayHello(childName)}>{childName}</button>
);

function Parent({ children }) {
  // This `sayHello` function is passed down to child elements.
  function sayHello(childName) {
    console.log(`Hello from ${childName} the child`);
  }

  const childrenWithProps = React.Children.map(children, child => {
    // `React.isValidElement` ensures the child is a valid React element.
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { sayHello });
    }
    return child;
  });

  return <div>{childrenWithProps}</div>;
}

Bien que cette approche permette de transmettre des accessoires aux enfants, il est moins sûr de type et potentiellement déroutant à lire par rapport à l'alternative suivante :

function Parent({ children }) {
  // This `sayHello` function is passed down to child elements.
  function sayHello(childName) {
    console.log(`Hello from ${childName} the child`);
  }

  // Directly passing props to children.
  return <div>{children(sayHello)}</div>;
}

Cette dernière approche transmet plus explicitement l'intention de transmettre des accessoires aux enfants et maintient la sécurité du type.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!