Question

我正在为我的主页使用倒计时脚本。它仅在第一次访问时加载。然后浏览其他网页并返回主页，它没有加载。

我正在使用流星并做出反应。

componentDidMount () {
$(window).load(() => {
 $('#clock').countdown('2016/9/9', function (event) {
     var $this = $(this).html(event.strftime(''
       + '<span>%m</span> months '
       + '<span>%w</span> weeks '
       + '<span>%d</span> days '
       + '<span>%H</span> hr '
       + '<span>%M</span> min '
       + '<span>%S</span> sec'));
  });
}); }

我的代码出了什么问题？

Answer 1

混合使用React和jQuery DOM操作绝对不是一个好主意。实际上，在$(window).load内调用componentDidMount没有任何意义，因为componentDidMount已经确保将React组件加载到DOM中。

Here是使用纯粹“反应”方法的简单倒数计时器的示例。我还复制了源代码，以防链接失效：

var CountdownTimer = React.createClass({
  getInitialState: function() {
    return {
      secondsRemaining: 0
    };
  },
  tick: function() {
    this.setState({secondsRemaining: this.state.secondsRemaining - 1});
    if (this.state.secondsRemaining <= 0) {
      clearInterval(this.interval);
    }
  },
  componentDidMount: function() {
    this.setState({ secondsRemaining: this.props.secondsRemaining });
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return (
      <div>Seconds Remaining: {this.state.secondsRemaining}</div>
    );
  }
});

React.renderComponent(<CountdownTimer secondsRemaining="10" />, document.querySelector('#output'));

计时器由组件的状态决定，该状态通过tick功能递减。 tick函数本身每x秒使用setInterval进行轮询。

我知道您的用例更复杂，因为它需要从特定日历日期开始计算数月，数周，日等。您可以自己编写代码（不会太难）或找到适当的npm库来为您执行此操作。

倒计时在某些情况下不起作用

1 个答案: