React 重用具有不同状态的组件

Question

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

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

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

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

我想将计时器组件重用于工作计时器和休息计时器，并设置不同的状态。

我已经设法做到这一点，但我不知道这是否是一个好方法，或者是否可以改进并使其更通用？

我的跟踪器组件如下所示：

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条件？