React Visual - 自动计数器

2019-10-15

描述

渲染一个自动计数器组件。

• 使用 React.useState() hook 初始化一个默认值为 0 的状态变量 ticker
• 定义一个 tick 方法，他将基于 interval 间隔进行增长，直到增长为 timer
• 定义一个 reset 方法，他将重置 ticker 为 0 并清除 interval
• 返回一个包含两个 <button> 元素的 <div>，其按钮分别调用 tick 和 reset 方法

实现

function Ticker(props) {
  const [ticker, setTicker] = React.useState(0);
  let interval = null;

  const tick = () => {
    reset();
    interval = setInterval(() => {
      if (ticker < props.times) setTicker(ticker + 1);
      else clearInterval(interval);
    }, props.interval);
  };

  const reset = () => {
    setTicker(0);
    clearInterval(interval);
  };

  return (
    <div>
      <span style={{ fontSize: 100 }}>{ticker}</span>
      <button onClick={tick}>Tick!</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

使用

ReactDOM.render(<Ticker times={5} interval={1000} />, document.getElementById('root'));

返回总目录

每天 30 秒系列之 React