Comment puis-je transmettre des accessoires aux composants enfants dans React ?

Passer des accessoires à {this.props.children}

Lors de la définition de composants génériques qui acceptent des éléments enfants, il devient nécessaire de transmettre des propriétés spécifiques à tous ces composants enfants. . Dans le paradigme des composants React, ceci est réalisé grâce à l'utilisation de {this.props.children}. Cependant, la question se pose : comment transmettre ces propriétés ?

Clonage d'enfants avec de nouveaux accessoires

React.Children fournit un utilitaire pour parcourir et cloner des éléments enfants, vous permettant de créer des éléments modifiés. versions avec de nouveaux accessoires :

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

function Parent({ children }) {
  function sayHello(childName) {
    console.log(`Hello from ${childName} the child`);
  }

  const childrenWithProps = React.Children.map(children, (child) => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { sayHello });
    }
    return child;
  });

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

Remarque : Il n'est généralement pas recommandé d'utiliser le cloneElement approche en raison de sa fragilité potentielle et de problèmes potentiels de sécurité de 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!