在ReactJS中倒数更新自我和自定义视图

Question

我在项目中使用ReactJS并希望创建一个具有自我更新和自定义视图的倒计时。我使用react-countdown-clock。这是非常好的，但我不知道如何自定义视图，它不显示分钟为0分钟。然后，我使用用css自定义，但在onEnd（）事件，更新日期道具与this.state倒计时不重新启动。

import React, { Component } from 'react'; 
 
import './App.css'; 
 
import ReactCountdownClock from 'react-countdown-clock'; 
 
import CountDown from 'react-simple-countdown'; 
 

 
class App extends Component { 
 

 
    constructor() { 
 
    super(); 
 

 
    var t = new Date(); 
 
    t.setSeconds(t.getSeconds() + 15); 
 

 
    this.state = { 
 
     time: 10, 
 
     date: t, 
 
    } 
 

 
    } 
 

 
    change_time() { 
 
    this.setState({ 
 
     time: 10, 
 
    }) 
 
    } 
 

 
    change_date() { 
 
    var t = new Date(); 
 
    t.setSeconds(t.getSeconds() + 15); 
 

 
    this.setState({ 
 
     date: t, 
 
    }) 
 
    } 
 

 
    render() { 
 
    const messages = { 
 
     days: { 
 
     plural: 'Days', 
 
     singular: 'Day', 
 
     }, 
 
     hours: 'Hours', 
 
     mins: 'Min', 
 
     segs: 'Seg', 
 
    }; 
 

 
    return (
 
     <div className="App"> 
 
     <ReactCountdownClock seconds={this.state.time} 
 
          color="#000" 
 
          size={300} 
 
          onComplete={this.change_time.bind(this)} /> 
 

 

 
     <CountDown 
 
      date={this.state.date} 
 
      className="MyCoundown" 
 
      {...messages} 
 
      onEnd={this.change_date.bind(this)} /> 
 

 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
export default App;

Answer 1

react-countdown-clock真的只是一点乐趣。它最适合与画布进行交互的React示例（最可能这是一个不好的例子）。确实很难让它以适合每个人的需求的方式工作。

但是没有任何东西可以阻止您创建的分支。您可以轻松修改它以永久显示分钟（和小时）。

diff --git a/coffee/react-countdown-clock.coffee b/coffee/react-countdown-clock.coffee 
index f41de4d..0c98d5f 100644 
--- a/coffee/react-countdown-clock.coffee 
+++ b/coffee/react-countdown-clock.coffee 
@@ -158,8 +158,8 @@ module.exports = React.createClass 
     seconds = "0#{seconds}" if seconds < 10 && minutes >= 1 

     timeParts = [] 
-  timeParts.push hours if hours > 0 
-  timeParts.push minutes if minutes > 0 
+  timeParts.push hours 
+  timeParts.push minutes 
     timeParts.push seconds 

     timeParts.join ':' 
@@ -168,11 +168,7 @@ module.exports = React.createClass 

    _fontSize: (timeString) -> 
    if @props.fontSize == 'auto' 
-  scale = switch timeString.length 
-  when 8 then 4 # hh:mm:ss 
-  when 5 then 3 # mm:ss 
-  else 2  # ss or ss.s 
-  size = @_radius/scale 
+  size = @_radius/4 
     "#{size}px" 
    else 
     @props.fontSize 

玩得开心！