ReactJS - вызов метода одного компонента из другого компонента

У меня есть два компонента. Я хочу вызвать метод первого компонента из второго компонента. Как я могу это сделать?

Вот мой код.

Первый компонент

class Header extends React.Component{

    constructor(){
        super();
    }

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

export default Header;

Второй компонент

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;

Ответы

Ответ 1

Вы можете сделать что-то вроде этого

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;

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

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

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

Ответ 2

Ну, на самом деле, React не подходит для вызова дочерних методов из родителя. Некоторые фреймворки, такие как Cycle.js, позволяют легко получать доступ к данным как от родителя, так и от ребенка и реагировать на него.

Кроме того, есть хороший шанс, что вам это действительно не нужно. Рассмотрите возможность вызова его в существующий компонент, это гораздо более независимое решение. Но иногда вы все еще нуждаетесь в этом, и тогда у вас мало вариантов:

  • Метод передачи вниз, если он является дочерним (самый простой и является одним из переданных свойств)
  • добавить библиотеку событий; в методе "Реакция экосистемного потока" наиболее известна, с Redux. Вы разделяете все события на отдельные состояния и действия и отправляете их из компонентов.
  • Если вам нужно использовать функцию от дочернего элемента в родительском компоненте, вы можете обернуть его третьим компонентом и клонировать родительский элемент с расширенными реквизитами.

UPD: если вам нужно поделиться некоторыми функциями, которые не связаны с каким-либо состоянием (например, статические функции в ООП), тогда нет необходимости содержать его внутри компонентов. Просто объявите его отдельно и вызовите при необходимости:

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

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