Comment transmettre les accessoires de l'enfant au parent dans React.js ?

Passer des accessoires au composant parent dans React.js

Ne pouvons-nous pas envoyer les accessoires d'un enfant à son parent en utilisant des événements dans React.js?

Bien que d'autres solutions existent, elles négligent souvent un point fondamental. Les parents possèdent déjà les accessoires qu’ils transmettent à leurs enfants. Il n'est donc pas nécessaire que les enfants renvoient ces accessoires aux parents.

Meilleure approche

Enfant :
Le composant enfant est resté simple.

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

Parent (célibataire Enfant) :
En utilisant l'accessoire qu'il envoie à l'enfant, le parent gère l'événement de clic.

const Parent = ({ childText }) => {
  const handleClick = (event) => {
    // Parent already has the child prop.
    alert(`Child button text: ${childText}`);
    alert(`Child HTML: ${event.target.outerHTML}`);
  };

  return <Child text={childText} onClick={handleClick} />;
};

Parent (Liste des enfants) :
Le parent gère plusieurs enfants sans perdre l'accès aux informations nécessaires.

const Parent = ({ childrenData }) => {
  const handleClick = (childData, event) => {
    alert(
      `Child button data: ${childData.childText} - ${childData.childNumber}`
    );
    alert(`Child HTML: ${event.target.outerHTML}`);
  };

  return (
    <div>
      {childrenData.map((childData, index) => (
        <Child
          key={index}
          text={childData.childText}
          onClick={e => handleClick(childData, e)}
        />
      ))}
    </div>
  );
};

Cette stratégie respecte l'encapsulation et réduit le couplage en évitant de s'appuyer sur la structure interne de l'enfant.

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!