在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 

玩得開心！