Comment transmettre les accessoires des composants enfants aux composants parents dans React.js ?

Passer des accessoires aux composants parents dans React.js

Lorsque vous travaillez avec des relations parent-enfant dans React.js, cela peut ne pas être immédiat évident comment transmettre les accessoires d'un composant enfant à son parent. Il existe cependant une approche simple qui évite de s'appuyer sur des événements ou des configurations complexes.

Identifier le problème

Le problème se pose lorsqu'on tente de transmettre directement les accessoires d'un enfant à son parent utilisant des événements comme onClick. Tenter d'accéder aux accessoires de l'enfant à travers des événements soulève la question de savoir pourquoi une telle approche serait nécessaire, étant donné que le parent possède déjà ces accessoires.

Une approche plus simple

Une solution plus simple consiste à utiliser le fait que le parent a déjà accès aux accessoires de son enfant et à les utiliser. directement :

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

// Parent component (with single child)
render() {
  return <Child onClick={this.handleChildClick} text={this.state.childText} />;
}

// Parent component (with list of children)
render() {
  const children = this.state.childrenData.map(childData => {
    return <Child onClick={this.handleChildClick.bind(null, childData)} text={childData.childText} />;
  });

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

Éviter le sur-couplage

Les solutions qui impliquent de transmettre l'intégralité du composant enfant au parent via les gestionnaires onClick ne sont pas recommandées, car elles introduisent un couplage inutile et compromettre l’encapsulation. Au lieu de cela, il est préférable de limiter l'interaction entre les composants à leurs interfaces respectives.

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!