🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 链滴笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

React Visual - 自动计数器

2019-10-15

描述

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

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

实现

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


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步