Как вызвать метод из другого компонента класса в React.js

Question

Итак, я должен классифицировать компоненты:Class1: имеет кнопку нажатияClass2: есть метод, вызывающий мой APIПо сути, я хочу вызвать метод, который устанавливает и редактирует состояния внутри одного класса из другого класса.Но я продолжаю терпеть неудачу.

Пример:

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

Что я пытался:

1. Я пытался использовать мой метод и вызов и установить свои состояния в моемApp.js (родительский класс class2 и class1);но затем моя консоль Class2.js говорит, что не может найти мои состояния.
2. Я также попробовал: в моем Class 2 и
   в Class1.

Answer 1

Первое: рассмотрите возможность использования Функциональных компонентов без состояния вместо Компонентов с состоянием в тех случаях, как ваш "Class1", который не использует состояния, только подпорки.

Теперь, чтобы сделать то, что вынужно .. просто передать свои методы в качестве опоры, что-то вроде этого:

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

Answer 2

Как мне вызвать метод из другого компонента класса в response.js

Использование реквизитов

«render prop» относится ктехника для совместного использования кода между компонентами React, использующими реквизит, значение которого является функцией "- actjs.org

Пример

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

Объяснение

В app.js мы импортировали компонент <Button/> и, используя props, мы передалиметод от app.js "sayHello" до созданной нами опоры, называемый whenClicked. В button.js мы ссылаемся на this.props.whenClicked и передаем его в свойство onClick.

sayHello isтеперь используется совместно двумя компонентами, потому что мы передали метод в качестве опоры компоненту <Button/>.

Answer 3

Вот, пожалуйста,

Class1.js

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

Class2.js

1. Либо привяжите функцию callApi в конструкторе, либо измените ее на функцию стрелки.

2. Передача метода callApi компоненту class1 в качестве реквизита и доступ к нему в вышеупомянутом компоненте как this.props.callApi и передача его 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
               )    
          }   
      }