Вызов функции одного компонента из другого, не связанного компонента в React

Question

Я работаю над приложением секундомера, используя ReactJS и Electron. У меня есть компонент Timer, который отслеживает время и отображает часы и элементы управления.

Элементы управления будут состоять из трех кнопок: Play, Pause и Stop. Эти компоненты кнопки совершенно не связаны с компонентом таймера.

Мой вопрос: если у меня есть handleStopClick() функция в компоненте Timer, как я могу вызвать его из компонента StopButton?

Примечание: в настоящее время нет функции воспроизведения / паузы. Таймер просто запускается, когда установлен, и одна кнопка Стоп должна очистить его. Остальное я добавлю, когда разберусь.

Вот Timer.jsx:

import '../assets/css/App.css';
import React, { Component } from 'react';
import PlayButton from './PlayButton'; // No function
import PauseButton from './PauseButton';
import StopButton from './StopButton';

class Timer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isRunning: false,
            secondsElapsed: 0
        };
    }

    getHours() {
        return ('0' + Math.floor(this.state.secondsElapsed / 3600)).slice(-2);
    }

    getMinutes() {
        return ('0' + Math.floor(this.state.secondsElapsed / 60) % 60).slice(-2);
    }

    getSeconds() {
        return ('0' + this.state.secondsElapsed % 60).slice(-2);
    }

    handleStopClick() {
        clearInterval(this.incrementer);
    }

    componentDidMount() {
        this.isRunning = true;
        console.log(this.isRunning);

        var _this = this; // reference to component instance

        this.incrementer = setInterval( () => {
            _this.setState({
                secondsElapsed: (_this.state.secondsElapsed + 1)
            });
        }, 1000)
    }

    playOrPauseButton() {
        if (this.isRunning) {return <PauseButton />}
        else {return <PlayButton />}
    }

    render() {
        return (
            <div>
                {this.playOrPauseButton()}
                <StopButton /> <hr />
                {this.getHours()} : {this.getMinutes()} : {this.getSeconds()}
            </div>
        );
    }
}

export default Timer;

И StopButton.jsx:

import '../assets/css/App.css';
import React, { Component } from 'react';
import Timer from './Timer';

class StopButton extends Component {
    handleClick () {
        console.log('this is: ', this);
        Timer.handleStopClick() // here's where I'd like to call Timer's function
    }

    render() {
        return (
            <button onClick={(e) => this.handleClick(e)}>
                &#9632;
            </button>
        );
    }
}

export default StopButton;

Answer 1

Вы можете передать handleStopClick метод в onClick обработчик вашего StopButton составная часть:

constructor(props) {
    ...
    this.handleStopClick = this.handleStopClick.bind(this);
}

render() {
    return (
        ...
        <StopButton onClick={this.handleStopClick}/>
    );
}

или, поскольку, похоже, у вас есть дополнительные вещи, которые вы хотите сделать, когда StopButton по щелчку, вы можете передать его как обычный реквизит и ссылаться на него в дочернем компоненте handleStopClick метод:

// Timer

render() {
    return (
        ...
        <StopButton parentStopClick={this.handleStopClick}/>
    );
}

// StopButton

handleStopClick() {
    ...
    this.props.parentStopClick();
}