反应重用具有不同状态的组件

Question

我对React很陌生，并试图编写我的第一个应用程序以更好地理解。

我要构建的是一个简单的时间跟踪工具，用户可以在其中启动和停止工作计时器。

在这里您可以看到我想到的设计：

如果用户单击“开始”按钮，则工作时间计时器组件应每秒更新一次。如果用户单击“休息”按钮，则计时器应停止，而休息时间计时器组件应开始计时。

我想将Timer组件重新用于工作计时器和中断计时器，并只是设置不同的状态。

我已经设法做到了，但是我不知道这是一个好方法还是可以改进并使它更通用？

我的Tracker组件如下所示：

class Tracker extends Component {
    constructor(props) {
        super(props);
        this.state = {
            workTime: 0,
            breakTime: 0,
            isRunning: false,
            timerType: 'workTimer'
        }
    }

    startTimer(type) {
        this.setState({
            isRunning: true,
            timerType: type
        });
        this.timerInterval = setInterval(() => {
            this.updateTimer()
        }, 1000);
    }

    stopTimer() {
        this.setState({
            isRunning: false
        });
        clearInterval(this.timerInterval);
    }

    toggleBreak(type) {
        this.setState({
            timerType: type
        });

        if (!this.state.isRunning && this.state.timerType === 'breakTimer') {
            this.startTimer('breakTimer');
        } else if (this.state.isRunning && this.state.timerType === 'breakTimer') {
            this.stopTimer();
            this.startTimer('workTimer');
        } else {
            this.stopTimer();
            this.startTimer('breakTimer');
        }
    }

    updateTimer() {
        let state = null;

        if (this.state.timerType === 'workTimer') {
            state = {
                workTime: this.state.workTime + 1000
            };
        } else {
            state = {
                breakTime: this.state.breakTime + 1000
            };
        }

        this.setState(state);
    }

    render() {
        return (
            <div className="tracker">
                <Timer time={ this.state.workTime }/>
                <Timer time={ this.state.breakTime }/>
                <TimerControls
                    isRunning={ this.state.isRunning }
                    start={ () => this.startTimer('workTimer') }
                    stop={ () => this.stopTimer() }
                    toggleBreak={ () => this.toggleBreak('breakTimer') }
                />
            </div>
        );
    }
}

控件组件：

class TimerControls extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const {isRunning, start, stop, toggleBreak} = this.props;

        return (
            <div className="tracker__control">
            <button onClick={ start } disabled={ isRunning }>Start</button>
            <button onClick={ toggleBreak }>Break</button>
            <button onClick={ stop } disabled={ !isRunning }>Stop</button>
            </div>
        );
    }
}

计时器组件：

 class Timer extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { time } = this.props;

        return (
            <div className="tracker__timer">{ timeFormat(time) }</div>
        );
    }
}

有没有办法摆脱timerType条件？