How do I call a method from another class componen

问题:

So I have to class components:
Class1: has a clickbutton
Class2: has a method calling my api

Basically, what I want is to call a method that sets and edits states inside one class from another class. But I keep failing.

Example:

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
      )    
   }   
}

What I tried:

1. I have tried to use my method and call and set my states in my App.js (parent of both class2 and class1); but then my Class2.js console says it can't find my states.
2. I also tried: < Class1 method={this.Class2Method} /> in my Class 2 and < div onClick={this.props.method} > in Class1.

回答1:

Here you go

Class1.js

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

Class2.js

1. Either bind callApi function in constructor or change it to arrow function.

2. Passdown callApi method to class1 component as a prop and access it in the above component as this.props.callApi and pass it to 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
               )    
          }   
      }
   

回答2:

How do i call a method from another class component in react.js

Using Props

"render prop" refers to a technique for sharing code between React components uising a prop whose value is a function" - reactjs.org

Example

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>
        );
    }
}

Explanation

In app.js we imported the component <Button/> and using props we passed a method from app.js "sayHello" to a prop we created called whenClicked. In button.js we referenced this.props.whenClicked and passed it to the onClick property.

sayHello is now being shared between the two components because we passed the method as a prop to the <Button/> component.

回答3:

First: Consider to use Stateless Functional Components instead of Stateful Components in cases like your "Class1" that don't use states, only props.

Now, to do what you need.. just pass your methods as a prop, something like this:

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)}
      )    
   }   
}