Question

我正在尝试在我的presenational moment.js组件中使用React实现滴答计时器。作为第一步，我想每秒调用一个函数，但不是获取函数应返回的文本，而是获得int值。

知道我应该如何实现这个吗？

这是我的组件：

import React, { PropTypes } from 'react';
import moment from 'moment';

const tickingTimer = () => {

   return "00:02:48";
}

const MyComponent = () => {

   return(
      <div>
         <div>{setInterval(tickingTimer(), 1000)}</div>
      </div>
   );
}

export default MyComponent;

当React呈现网页时，我的00:02:48值会增加3倍，而不是int。 20,21,22

如何调用在我的演示组件中每秒返回一个值的函数？

Answer 1

原因是setInterval返回一个timerId，稍后您可以使用它来清除间隔。

您需要在状态

中保存函数的返回值

import React, { PropTypes } from 'react';
import moment from 'moment';

const tickingTimer = () => {

   return "00:02:48";
}

const MyComponent class extends React.Component {
   state = { 
      timer: ''
   }
   componentDidMount(){
       setInterval(tickingTimer, 1000)
   }

   tickingTimer = () => {

     this.setState({timer:"00:02:48"});
    }
   return(
      <div>
         <div>{this.state.timer}</div>
      </div>
   );
}

export default MyComponent;

在React演示组件中以设定的间隔调用函数

1 个答案: