Comment transmettre les accessoires d'un composant enfant au composant parent dans React.js sans renvoyer l'enfant entier ?

Comment transmettre des accessoires d'un composant enfant à un composant parent dans React.js à l'aide d'événements

Dans React.js, il existe différentes approches pour transmettre des données à partir d'un composant enfant à son parent. Bien que les gestionnaires d'événements soient souvent pratiques, il est important de comprendre les meilleures pratiques et les pièges potentiels.

Pourquoi nous ne renvoyons pas l'ensemble du composant enfant

Autres solutions pour ce problème peut suggérer de renvoyer l'intégralité du composant enfant au parent via le gestionnaire d'événements. Cependant, cette approche est généralement déconseillée car :

• Duplication des accessoires : Le parent possède déjà les accessoires qui sont transmis à l'enfant, il est donc inutile de les rendre.
• Couplage et encapsulation : Coupler étroitement le parent et l'enfant de cette manière peut conduire à une maintenance et une refactorisation problèmes.

Meilleure mise en œuvre

Au lieu de cela, vous devez utiliser le fait que le parent dispose déjà des accessoires dont l'enfant a besoin.

Enfant :

var Child = React.createClass({
  render: function() {
    return <button onClick={this.props.onClick}>{this.props.text}</button>;
  },
});

Parent (célibataire) Enfant :

var Parent = React.createClass({
  getInitialState: function() {
    return { childText: "Click me! (parent prop)" };
  },
  render: function() {
    return <Child onClick={this.handleChildClick} text={this.state.childText} />;
  },
  handleChildClick: function(event) {
    // Access the props passed to the child
    alert("The Child button text is: " + this.state.childText);
    // Access the click target
    alert("The Child HTML is: " + event.target.outerHTML);
  },
});

Parent (plusieurs enfants) :

var Parent = React.createClass({
  getInitialState: function() {
    return {
      childrenData: [
        { childText: "Click me 1!", childNumber: 1 },
        { childText: "Click me 2!", childNumber: 2 },
      ],
    };
  },
  render: function() {
    const children = this.state.childrenData.map(
      (childData, childIndex) => {
        return (
          <Child
            onClick={this.handleChildClick.bind(null, childData)}
            text={childData.childText}
            key={childIndex}  // Added key for each child component
          />
        );
      }
    );
    return <div>{children}</div>;
  },
  handleChildClick: function(childData, event) {
    alert("The Child button data is: " + childData.childText + " - " + childData.childNumber);
    alert("The Child HTML is: " + event.target.outerHTML);
  },
});

Dans ces exemples, le parent a accès aux accessoires et clique sur la cible de la composante enfant sans qu'il soit nécessaire de renvoyer l'enfant en entier.

ES6 Mise à jour

Pour la syntaxe ES6, le code ressemblerait à ceci :

Enfant :

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

Parent (single Enfant) :

class Parent extends React.Component {
  state = { childText: "Click me! (parent prop)" };
  handleChildClick = (event) => {
    alert("The Child button text is: " + this.state.childText);
    alert("The Child HTML is: " + event.target.outerHTML);
  };
  render() {
    return <Child onClick={this.handleChildClick} text={this.state.childText} />;
  }
}

Parent (plusieurs Enfants) :

class Parent extends React.Component {
  state = {
    childrenData: [
      { childText: "Click me 1!", childNumber: 1 },
      { childText: "Click me 2!", childNumber: 2 },
    ],
  };
  handleChildClick = (childData, event) => {
    alert("The Child button data is: " + childData.childText + " - " + childData.childNumber);
    alert("The Child HTML is: " + event.target.outerHTML);
  };
  render() {
    const children = this.state.childrenData.map((childData, childIndex) => (
      <Child key={childIndex} text={childData.childText} onClick={(e) => this.handleChildClick(childData, e)} />
    ));
    return <div>{children}</div>;
  }
}

Ces solutions permettent une meilleure encapsulation et une meilleure maintenance tout en offrant une flexibilité dans la transmission des informations nécessaires de l'enfant au composant parent.

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!