Comment communiquer efficacement les accessoires pour enfants au parent dans React.js ?

Communication des accessoires pour enfants au parent dans React.js

Question :

Existe-t-il un moyen simple de transférer un les accessoires de l'enfant à son parent en utilisant des événements dans React.js?

Dévoilement de l'approche incorrecte :

Certaines réponses suggèrent de transmettre l'intégralité du composant enfant comme argument aux fonctions parent. Cependant, cette approche est problématique pour plusieurs raisons :

• Couplage inutile : Il couple étroitement le parent et l'enfant, ce qui rend plus difficile la modification de l'enfant sans affecter le parent.
• Manque d'encapsulation : Le parent expose les détails de mise en œuvre interne de l'enfant, violant les principes de encapsulation.

La meilleure façon :

La solution optimale consiste à utiliser les accessoires que le parent fournit déjà à l'enfant. En transmettant les données nécessaires à l'enfant via des accessoires, le parent peut accéder et manipuler ces données sans recourir à des mécanismes externes.

Exemple :

// Child Component
const Child = ({ onClick, text }) => (
  <button onClick={onClick}>{text}</button>
);

// Parent Component
const Parent = () => {
  const handleChildClick = (e) => {
    // Access and use the prop passed to the child
    alert(`The Child button text is: ${e.target.innerText}`);
  };

  return <Child onClick={handleChildClick} text="Click Me" />;
};

Cette approche suit la philosophie de conception de React en maintenant des limites claires entre les composants et en évitant les complexités inutiles.

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!