如何在react中实现一个倒计时组件

倒计时组件

import React, {
Component
} from 'react'
import $ from 'jquery'
import "../../css/spellTEPayPublic/countDown.css"

export default class countDown extends Component{
constructor(props){
super(props);
this.state={
day:1,
hour:0,
minute:0,
second:0,
millisecond:0
}
}
componentDidMount(){
let endTime= this.props.msg.endTime.replace(/-/g, "/");
countFun(endTime);
}
render(){
return(

距离本团结束剩余0天
0
:
0
:
0

)
}
}
function countFun(time){
//if(typeof end_time == "string")
var end_time = new Date(time).getTime(),//月份是实际月份-1
//current_time = new Date().getTime(),
sys_second = (end_time-new Date().getTime());
var timer = setInterval(function(){
if (sys_second > 0) {
sys_second -= 10;
var day = Math.floor((sys_second /1000/ 3600) / 24);
var hour = Math.floor((sys_second /1000/ 3600) % 24);
var minute = Math.floor((sys_second /1000/ 60) % 60);
var second = Math.floor(sys_second/1000 % 60);
var haomiao = Math.floor(sys_second%1000);

		$(".day").text(day);//计算天  
        $(".hour").text(hour<10?"0"+hour:hour);//计算小时  
        $(".minute").text(minute<10?"0"+minute:minute);//计算分  
        $(".second").text(second<10?"0"+second+"."+haomiao:second+"."+haomiao);// 计算秒  
    } else {   
        clearInterval(timer);  
    }  
}, 10);  

}