在用更新自我和自定义视图的ReactJ中计数

Question

我正在项目中使用reactjs，并希望使用自我更新和自定义视图创建一个倒数。

我使用React-countdown-clock。很好，但是我不知道自定义视图，并且不会显示分钟为0时的分钟。然后，我正在使用使用CSS自定义的React-simple-countdown，但是当在Onend（）事件中，更新日期props用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-count-countdown-clock实际上只是很有趣。它提供了与画布相互作用的反应示例（这很可能是一个糟糕的例子）。当然，很难以适合每个人要求的方式工作。

但是没有什么可以阻止您创建一个反应计数锁定的叉子。您可以轻松地修改它以永久显示几分钟（和小时）。

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

玩得开心！