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

Passer des accessoires enfants au parent dans React.js

Context

React fournit un mécanisme de communication puissant entre les composants parent et enfant via des accessoires. Cependant, il peut arriver que vous souhaitiez transmettre l'intégralité du composant enfant ainsi que ses accessoires au parent. Cela peut être utile dans les scénarios où vous souhaitez encapsuler une logique complexe chez l'enfant et fournir une interface plus simple au parent.

Préoccupations concernant le transfert d'accessoires de l'enfant au parent

Historiquement, certains les développeurs ont suggéré d'utiliser des événements pour transmettre des accessoires enfants au parent, mais cette approche soulève des inquiétudes concernant le couplage et l'encapsulation. L'accès aux accessoires du composant enfant et aux détails d'implémentation directement dans le parent peut coupler étroitement les composants et entraver les efforts de refactorisation.

Approche recommandée

Au lieu de cela, il est recommandé d'exploiter le mécanisme d'accessoires parent existant pour accéder les données de l'enfant. Cela permet au parent d'utiliser les accessoires qu'il fournit à l'enfant, évitant ainsi d'avoir à récupérer les accessoires de l'enfant à l'intérieur de l'enfant lui-même.

Implémentation à l'aide de composants de classe

Composant enfant :

class Child extends Component {
  render() {
    return <button onClick={this.props.onClick}>{this.props.text}</button>;
  }
}

Composant parent :

class Parent extends Component {
  getInitialState() {
    return { childText: "Click me! (parent prop)" };
  }

  render() {
    return (
      <Child
        onClick={this.handleChildClick}
        text={this.state.childText}
      />
    );
  }

  handleChildClick(event) {
    const childText = this.state.childText;

    // Parent has access to child prop
    alert(`The Child button text is: ${childText}`);

    // Parent has access to event target
    alert(`The Child HTML is: ${event.target.outerHTML}`);
  }
}

Implémentation à l'aide de composants fonctionnels

Composant enfant :

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

Composant parent :

const Parent = ({ childrenData }) => {
  const handleChildClick = (childData, event) => {
    const childText = childData.childText;
    const childNumber = childData.childNumber;

    // Parent has access to child prop
    alert(`The Child button data is: ${childText} - ${childNumber}`);

    // Parent has access to event target
    alert(`The Child HTML is: ${event.target.outerHTML}`);
  };

  return (
    <div>
      {childrenData.map((childData) => (
        <Child
          key={childData.childNumber}
          onClick={(event) => handleChildClick(childData, event)}
          text={childData.childText}
        />
      ))}
    </div>
  );
};

Conclusion

En adoptant le mécanisme prop existant dans React, vous pouvez transmettre efficacement des données entre le parent et composants enfants sans introduire de couplage inutile ni violer les principes d’encapsulation. Cette approche garantit que les composants restent indépendants et flexibles, permettant un code plus propre et plus maintenable.

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!