Реагировать на вызов функции из другого компонента?

Question

Я считаю, что пытаюсь выполнить sh что-то простое, но не могу этого сделать.

React не вызывает 'alertFun c ()' из ChildComponent из другого компонента, как я надеялся будет.

Вот ChildComp:

class ChildComp extends React.Component {
    constructor(props) {
        super(props);
        this.state = { };
        this.input = React.createRef();
    }

    alertFunc = () => {
        alert('This function is called from the Child Component');
    };

    handleChange = () => {
        this.alertFunc();
    };

    render() {
        return (
            <ChildComp onChange={this.handleChange} />
        );
    }
}

Затем я пытаюсь вызвать его из родительского compolike:

render(props){

    return(
        <button onClick={props.alertFunc()}>Next</button>
    );

}

И я получаю ошибку :

props.alertFunc is not a function

Answer 1

Вы не можете вызвать функцию экземпляра дочернего компонента из родительского компонента подобным образом, у вас нет доступа к этой функции из родительского компонента. Если вы используете sh оба компонента, чтобы иметь к нему доступ (родительский и дочерний), вы должны каким-то образом разделить его между ними, используя context на более высоком уровне, если иерархия глубоко вложена, или определите его в родительском элементе и передать его дочернему элементу через props или использовать redux. Или, если не зависит от состояния компонента, переместите его из компонента.