ReactJS - Appel D'Une Méthode De Composant À Partir D'Un Autre Composant

J'ai deux composants. Je veux appeler une méthode de la première composante de la deuxième composante. Comment puis-je le faire?

Voici mon code.

Premier Composant

class Header extends React.Component{

    constructor(){
        super();
    }

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

export default Header;

Deuxième Composant

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;

Pourquoi voulez-vous faire? Je ne pense pas que sa bonne pratique, il devrait casser composant de modèle. Vous avez assez de plugins pour gérer les événements en un seul endroit: RxJS par exemple (Flux,Redux ...)
Qu'entendez-vous par la rupture de composants de modèle ?
Beaucoup plus facile de réutiliser des composants lorsqu'ils sont indépendants. Si vous voulez obtenir ce que vous voulez, de les fusionner et de créer un composant. Considérons le cas lorsque vous modifiez composant parent nom de la méthode: après que vous avez besoin pour aller au-dessus de votre projet et de changement des dépendances, respectivement.

InformationsquelleAutor Kushal Jain | 2016-08-24

Vous pouvez faire quelque chose comme ceci

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;

À l'aide de la statique

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

MyComponent.customMethod('bar');  //true

Je ne veux pas ajouter PopupOver composant en composant d'en-Tête. Est-il une autre solution ?
Vous pouvez utiliser Réagir.la statique pour elle alors
tout lien ou un exemple ?
juste mis à jour les deux options
C'est la bonne réponse pour ce cas. Mais il ne fonctionne pas pour les cas difficiles, lorsque les deux composants ne sont pas parents/enfants, mais ils sont frère/sœur.

InformationsquelleAutor Mohit Verma

4

Eh bien, en fait, de Réagir n'est pas adapté à l'appel de l'enfant méthodes de l'objet parent. Certains cadres, comme Cycle.js, permettre d'accéder facilement aux données à la fois des parents et de l'enfant, et d'y réagir.

Aussi, il ya une bonne chance que vous n'avez pas vraiment besoin. Pensez à téléphoner en composant existant, il est beaucoup plus indépendant de la solution. Mais parfois, vous avez encore besoin d'elle, et puis vous avez peu de choix:
- Passer méthode, si c'est un enfant (le plus facile, et c'est l'une des passée de propriétés)
- ajouter des événements de la bibliothèque; de Réagir écosystème Flux approche est la plus connue, avec Redux de la bibliothèque. Vous distinctes tous les évènements dans un etat séparé et d'actions, et de les acheminer à partir de composants
- si vous avez besoin d'utiliser la fonction de l'enfant dans un composant parent, vous pouvez l'envelopper dans un troisième volet, et clone parent augmentée accessoires.
UPD: si vous avez besoin de partager certaines fonctionnalités qui n'implique pas de tout état (comme statique fonctions en programmation orientée objet), alors il n'est pas nécessaire pour le contenir à l'intérieur des composants. Il suffit de déclarer séparément et invoquer quand le besoin:
```
let counter = 0;
function handleInstantiate() {
   counter++;
}

constructor(props) {
   super(props);
   handleInstantiate();
}
```
- Merci, mais mes deux composantes sont indépendantes, sur un dépendantes d'autres, j'ai juste besoin d'appeler une fonction d'un composant à partir d'autres comme nous l'appel d'une fonction statique d'une classe java à partir d'une autre classe
- Si vous avez besoin d'appeler un static fonction, qu'il ne pouvait être séparés juste une fonction. Mettez donc cette fonction pour utils dossier, et à l'importation lorsque vous en avez besoin. Si un etat est en cause, que le passage de down ou extérieure de l'état de la gestion.
- pouvez-vous svp me donner un petit exemple de ce
- J'ai mis à jour le post. Fondamentalement, il suffit de déclarer comme une fonction usuelle, et de l'appeler quand vous en avez besoin – il n'est pas nécessaire de conserver des méthodes statiques à l'intérieur des classes (sauf si vous écrivez en programmation orientée objet, le style, mais il est généralement déconseillé de Réagir de la communauté).
InformationsquelleAutor Bloomca

Vous devez vous connecter pour publier un commentaire.