web-dev-qa-db-fra.com

Comment appeler une méthode à partir d'un autre composant de classe dans React.js

Je dois donc classer les composants:
Classe 1: possède un bouton de clic
Class2: a une méthode appelant mon api

Fondamentalement, ce que je veux, c'est appeler une méthode qui définit et modifie les états à l'intérieur d'une classe d'une autre classe. Mais je continue d'échouer.

Exemple:

Class1.js
export class Class1 extends Component {
   render() {
      return (
         <div onClick={must call Class2Method}></div>
      )
   }
}

Class2.js
export class Class2 extends Component {
   Class2Method(){
      Here I call my API, I set & call states, ...
   }
   render {
      return (
         <Class1 />
         Here I return my API content
      )    
   }   
}

Ce que j'ai essayé:

  1. J'ai essayé d'utiliser ma méthode et d'appeler et de définir mes états dans mon App.js (parent à la fois de classe2 et de classe1); mais ma console Class2.js dit qu'elle ne trouve pas mes états.
  2. J'ai également essayé: <Class1 method = {this.Class2Method} /> dans ma classe 2 et <div onClick = {this.props.method}> dans Class1.
reactjsclassmethodscomponents
10
Cédric Bloem

Voici

Class1.js

       export class Class1 extends Component {
             render() {
                return (
                    <div onClick={this.props.callApi}></div>
                )
            }
       }

Class2.js

  1. Soit lier la fonction callApi dans le constructeur, soit la changer en fonction flèche.

  2. Passez la méthode callApi au composant class1 en tant qu'accessoire et accédez-y dans le composant ci-dessus en tant que this.props.callApi et passez-le à onClick of div.

     export class Class2 extends Component {
       callApi = () => {
           Here I call my API, I set & call states, ...
        }
       render {
           return (
              <Class1 callApi={this.callApi} />
                   Here I return my API content
            )    
       }   
   }
3
Hemadri Dasari

Premièrement: pensez à utiliser Stateless Functional Components au lieu de Stateful Components dans des cas comme votre "Class1" qui n'utilisent pas d'états, uniquement des accessoires.

Maintenant, pour faire ce dont vous avez besoin ... passez simplement vos méthodes comme accessoire, quelque chose comme ceci:

export class Class1 extends Component {
   render() {
      return (
         <div onClick={this.props.getData()}>Click to Call API</div>
      );
   }
}

export class Class2 extends Component {
   state = {
    data: null,
   };
   
   callApi = () => {
      // Get API data
      const data = {
        hello: 'world',
      };
      
      this.setState({ data });
   }
   
   render {
      return (
         <Class1 getData={this.callApi} />
         {JSON.stringify(this.state.data)}
      )    
   }   
}
0
Mateus Silva

Comment appeler une méthode à partir d'un autre composant de classe dans react.js

Utilisation des accessoires

"render prop" fait référence à une technique de partage de code entre React composants uising un prop dont la valeur est une fonction "- reactjs.org

Exemple

app.js

import Button from '../../pathtoButton';
export class App extents Component {
    constructor(props){
        super(props)
        this.state = {
             name:'John'
        }
    }
    sayHello(){
        const { name } = this.message;
        alert(`Hello ${name}`}
    }
    render(){
        return (
             <div>
                 <Button
                     value="click me"
                     whenClicked={this.sayHello}
             </div>
        );
    }
}

button.js

export class Button extents Component {
    constructor(props){
        super(props)
        this.state = {
             style:{background:'red', color:'white'},
        }
    }
    render(){
        const { style } = this.state;
        const { whenClicked, value} = this.props;
        return (
             <div>
                 <button style={style} onClick={whenClicked}>{value}</button>
             </div>
        );
    }
}

Explication

Dans app.js nous avons importé le composant <Button/> et en utilisant props nous avons passé une méthode de app.js "sayHello" à un accessoire que nous avons créé appelé whenClicked. Dans button.js nous avons référencé this.props.whenClicked et l'a passée à la propriété onClick.

sayHello est maintenant partagé entre les deux composants, car nous avons transmis la méthode en tant qu'accessoire à <Button/> composant.

0
Luke Walker