web-dev-qa-db-fra.com

ReactJS - Appel d'une méthode de composant à partir d'un autre composant

J'ai deux composants. Je veux appeler une méthode du premier composant du deuxième composant. Comment puis-je le faire?

Voici mon code.

première composante

class Header extends React.Component{

    constructor(){
        super();
    }

    checkClick(e, notyId){
       alert(notyId);
    }
}

export default Header;

Deuxième composante

class PopupOver extends React.Component{

    constructor(){
        super();
        // here i need to call Header class function check click....
        // How to call Header.checkClick() from this class
    }

    render(){
        return (
            <div className="displayinline col-md-12 ">
                Hello
            </div>
        );
    }
}

export default PopupOver;
reactjsclassmethodscall
28
Kushal Jain

Vous pouvez faire quelque chose comme ça

import React from 'react';

class Header extends React.Component {

constructor() {
    super();
}

checkClick(e, notyId) {
    alert(notyId);
}

render() {
    return (
        <PopupOver func ={this.checkClick } />
    )
}
};

class PopupOver extends React.Component {

constructor(props) {
    super(props);
    this.props.func(this, 1234);
}

render() {
    return (
        <div className="displayinline col-md-12 ">
            Hello
        </div>
    );
}
}

export default Header;

Utilisation de la statique

var MyComponent = React.createClass({
 statics: {
 customMethod: function(foo) {
  return foo === 'bar';
  }
 },
   render: function() {
 }
});

MyComponent.customMethod('bar');  // true
18
Mohit Verma

Eh bien, en fait, React ne convient pas à l'appel de méthodes enfant à partir du parent. Certains frameworks, tels que Cycle.js , permettent d'accéder facilement aux données des parents et des enfants, et y réagir.

En outre, il y a de fortes chances que vous n'en ayez pas vraiment besoin. Pensez à l'appeler dans un composant existant, c'est une solution beaucoup plus indépendante. Mais parfois, vous en avez toujours besoin et vous avez alors peu de choix:

  • Passez la méthode vers le bas, s'il s'agit d'un enfant (le plus simple et l'une des propriétés passées)
  • ajouter une bibliothèque d'événements; in React écosystème) L’approche par flux est la plus connue, avec la bibliothèque Redux . Vous séparez tous les événements en états et actions séparés, puis vous les répartissez à partir de composants.
  • si vous devez utiliser la fonction de l'enfant dans un composant parent, vous pouvez envelopper un troisième composant et cloner le parent avec des propriétés augmentées.

[~ # ~] upd [~ # ~] : si vous avez besoin de partager des fonctionnalités qui n'impliquent aucun état (comme les fonctions statiques dans OOP ), il n’est pas nécessaire de le contenir à l’intérieur des composants. Il suffit de le déclarer séparément et d'invoquer quand il le faut:

let counter = 0;
function handleInstantiate() {
   counter++;
}

constructor(props) {
   super(props);
   handleInstantiate();
}
4
Bloomca