Javascript 将计时器转换为反应

仍在学习react，有几个例子我正试图理解状态和道具。我希望有人能告诉我如何转换下面的东西

const display=document.querySelector（'time'）；
常数倒数=新的倒数计时器（120）；
const timeObj=CountDownTimer.parse（120）；
格式（timeObj.minutes，timeObj.seconds）；
倒计时.点击（格式）；
document.querySelector（'button'）。addEventListener（'click'，（）=>{
倒计时。开始（）；
});
函数格式（分、秒）{
分钟=分钟<10？`0${minutes}`：分钟；
秒=秒<10？`0${seconds}`：秒；
display.textContent=`${minutes}:${seconds}`；
}

开始倒计时
注册在几分钟内结束！

您只需创建一个react类作为计时器

这是一个粗略的概述，您可能需要稍微处理一下数据。。但是应该让你开始。注意，它接受毫秒并转换为秒和分钟

class Timer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            ms: props.ms
        }
    }
    componentWillMount() {
        this.interval = setInterval( () => {
            if ((this.state.ms) <= 0) {
                clearInterval(this.interval);
                this.forceUpdate();
                return;
            }
            this.setState({ms: this.state.ms - 1000});
        }, 1000)
    }
    componentWillUnmount() {
        clearInterval(this.interval);
    }
    format() {
        const { ms } = this.state;
        let seconds = Math.floor(ms / 1000);
        let minutes = Math.floor(seconds / 60);

        minutes = minutes < 1 ? '00' : minutes < 10 ? `0${minutes}` : minutes;
        seconds = seconds < 1 ? '00' : seconds < 10 ? `0${seconds}` : seconds;
        return `${minutes}:${seconds}`;
    }
    render() {
        return (
            <div>{this.format(this.state.ms)}</div>
        )
    }
}

类计时器扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
ms:props.ms
}
}
组件willmount（）{
this.interval=setInterval（（）=>{
如果（（this.state.ms），我建议删除countdowntimer.js，从零开始构建React项目。您应该可以使用单个React组件完成此操作。发布您的尝试可能会在需要的地方获得更多帮助。：）谢谢。我看到你在那里用道具做了什么来传递它。确实需要调整数字，但这对我来说是一个很好的开始。我已经通过mod
seconds=seconds%60；seconds=seconds<10？`0${seconds}修复了数据`：seconds；
。有没有办法通过操作在组件中包含或启动
？我的具体需要是在模式中打开它，所以我只希望该计时器在模式打开时启动，在关闭后清除。@DaveBergschneider您描述的是有条件地呈现某些内容。有很多示例说明如何执行此操作，我想建议您做一点研究。但想法是单击按钮，您可以设置一个显示模式的状态。当您要显示模式时，您可以通过显示模式的相同方式有条件地在其中呈现子项。
{this.state.someflagthowmodel？：null}
谢谢。是的，我有通过状态工作的模式。这给了我一个好主意。我发现react比我想象的要简单，但是管理状态和传递道具是违反直觉的，或者至少还没有效率。@DaveBergschneider是的，需要一点时间才能掌握它的窍门。。当你这么做的时候，它是一个非常强大的工具！让我来看看我知道如果你仍然无法掌握窍门，如果是这样，我会提供更多帮助：）
<Timer ms={15000} />