如何在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);  

}