react ahooks 表格中的每条数据都实现倒计时功能

在我们日常需求中, 实现一个倒计时是常见的需求, 或者一个页面有两个倒计时 我们都可以去实现, 但是如何实现在antd 的Table 中实现倒计时呢

现在有一个需求, 点击一条数据的下载操作, 开启30s倒计时, 点击另一个也是开启30s倒计时, 但是两者的倒计时互不冲突

可以使用 ahooks 中的 useCountDown

interval.js中的内容

import React , {useState}from 'react';
import { Typography, Button } from 'antd';
import { useCountDown } from 'ahooks';


const Interval = ({
  className,
  style,
  btnType = 'Link',
  disabled,
  onClick,
  children,
}) => {
  const [targetDate, setTargetDate] = useState();
  const [countdown] = useCountDown({
    targetDate,
  });

  const onDownload = event => {
    setTargetDate(Date.now() + 30000);
    onClick?.(event);
  };

  const Component = btnType =&