自定义倒计时组件：
import React, { Component } from 'react'; function fixedZero(val) { return val * 1 < 10 ? `0${val}` : val;}const initTime = props => { let lastTime = 0; let targetTime = 0; try { if (Object.prototype.toString.call(props.target) === '[object Date]') { targetTime = props.target.getTime(); } else { targetTime = new Date(props.target).getTime(); } } catch (e) { throw new Error('invalid target prop', e); } lastTime = targetTime - new Date().getTime(); return { lastTime: lastTime < 0 ? 0 : lastTime, };}; class CountDown extends Component { timer = 0; interval = 1000; constructor(props) { super(props); const { lastTime } = initTime(props); this.state = { lastTime, }; } static getDerivedStateFromProps(nextProps, preState) { const { lastTime } = initTime(nextProps); if (preState.lastTime !== lastTime) { return { lastTime, }; } return null; } componentDidMount() { this.tick(); } componentDidUpdate(prevProps) { const { target } = this.props; if (target !== prevProps.target) { clearTimeout(this.timer); this.tick(); } } componentWillUnmount() { clearTimeout(this.timer); } // defaultFormat = time => ( // <span>{moment(time).format('hh:mm:ss')}</span> // ); defaultFormat = time => { const hours = 60 * 60 * 1000; const minutes = 60 * 1000; const h = Math.floor(time / hours); const m = Math.floor((time - h * hours) / minutes); const s = Math.floor((time - h * hours - m * minutes) / 1000); return ( <span> {fixedZero(h)}:{fixedZero(m)}:{fixedZero(s)} </span> ); }; tick = () => { const { onEnd } = this.props; let { lastTime } = this.state; this.timer = setTimeout(() => { if (lastTime < this.interval) { clearTimeout(this.timer); this.setState( { lastTime: 0, }, () => { if (onEnd) { onEnd(); } } ); } else { lastTime -= this.interval; this.setState( { lastTime, }, () => { this.tick(); } ); } }, this.interval); }; render() { const { format = this.defaultFormat, onEnd, ...rest } = this.props; const { lastTime } = this.state; const result = format(lastTime); return <span {...rest}>{result}</span>; }} export default CountDown;应用时间接引入传入参数即可：
{ title: '间隔完结', dataIndex: 'CreateTime', sorter: true, render: val => (<CountDown style={{ fontSize: 20 }} target={val} /> ), // val是倒计时截止工夫，格局最好是YYYY/MM/DD HH:MM:SS }