有什么方法可以在reactjs中進行時間倒計時嗎？

這是我的main.js檔案，我試圖添加倒計時器。 但是它只顯示在第一張卡片上，而不是在所有其他的卡片上。 請幫助我獲得解決方案。

 import { Grid } from "@mui/material"/span>;
    import Timer from "./MainPage/Timer"。
    import Card from "@mui/material/Card"/span>;
    import CardContent from "@mui/material/CardContent"/span>;
    import Typography from "@mui/material/Typography" ;
    
    const Main = (props) => {
      const getMain = （） => {
        return (
          // return console.log(props);/span>
          <Card sx={{ m。  2, width: 400 }}> 
            <CardContent>/span>
              <Grid container spacing={2}>/span>
                <Grid item>
                  <span className="ui top attach label">/span>
                    {/* 匹配 {match["Match"]}。*/}
                    匹配{props.match.Match}。
                  </span> 
                </Grid>/span>
                <Grid item>
                  < Typography variant="h5" component="div"> 
                    {/* {match["Team_A"]} */}
                    {props.match.Team_A}。
                  </Typography>/span>
                </Grid>/span>
                <Grid item>
                  <Typography sx={{ MB: 1.5 } } color="text.secondary"> 
                    {/* {match["Date"]}
                     */}
                    {props.match.Date}{props.match.Date}
                  </Typography>/span>
                  <Typography sx={{ mb: 1.5 } } color="text.secondary"> 
                    {
                      <Timer
                        remainingDate={props.match.Date}。
                        remainingTime={props.match.Time}。
                      />
                    }
                  </Typography> }
                </Grid>/span>
                <Grid item className="ui right aligned"> 
                  < Typography variant="h5" component="div"> 
                    {/* {match["Team_B"]} */}
                    {props.match.Team_B}。
                  </Typography>/span>
                </Grid>/span>
              </Grid>/span>
            </CardContent>/span>
          </Card>
        );
      };
      // setInterval(getMain, 1000); 
      return getMain()。
    };
    export default Main;

Timer.js檔案 

const Timer = (props) => {
  // console.log(props);

  var countDownDate = new Date (
    props.remainingDate   " "   props.remainingTime 
  ).getTime（）。

  //每1秒更新一次倒數。
  //var x = setInterval(function () {)
  //獲得今天的日期和時間 
var now = new Date().getTime() 。

  //查找現在與倒計時日期之間的距離。
  var distance = countDownDate - now;

  //span>天、小時、分鐘和秒的時間計算。
  var days = Math. floor(distance / (1000 * 60 * 60 * 24) ) 。
  var hours = Math. floor((距離% (1000 * 60 * 60 * 24) / (1000 * 60 * 60) )。
  var minutes = Math. floor((距離% (1000 * 60 * 60) / (1000 * 60) )。
  var seconds = Math.floor( (distance % (1000 * 60)) / 1000）。)

  ///在一個id="demo "的元素中輸出結果。
  return days   "d"   hours   "h"   minutes   "m"   seconds   "s"。
};

export default Timer;

如果我不使用setInterval，它會顯示所有卡片的剩余時間。 但當我使用setInterval時，它只顯示在第一張卡上。 下面是使用setInterval的代碼。

不使用 setInterval

Timer.js

const Timer = （props）=> {
  // console.log(props);

  var countDownDate = new Date (
    props.remainingDate   " "   props.remainingTime 
  ).getTime（）。

  //每1秒更新一次倒計時。
  var x = setInterval(function() {
    //獲得今天的日期和時間。
    var now = new Date().getTime() 。

    //查找現在與倒計時日期之間的距離。
    var distance = countDownDate - now;

    //span>天、小時、分鐘和秒的時間計算。
    var days = Math. floor(distance / (1000 * 60 * 60 * 24) ) 。
    var hours = Math.floor(
      (距離% (1000 * 60 * 24) / (1000 * 60 * 60)
    );
    var minutes = Math. floor((距離% (1000 * 60 * 60) / (1000 * 60) )。
    var seconds = Math.floor( (distance % (1000 * 60)) / 1000）。)

    ///在一個id="demo "的元素中輸出結果。
    document.getElementById("tmr"/span>).innerHTML =
      天   "d"/span>   小時   "h"/span>   分鐘   "m"/span>   秒   "s"/span>。
  }, 1000）。)
  return (
    <div> 
      <span id="tmr"/span>> </span>>
    </div>
  );
};

export default Timer;

使用setInterval，我得到的輸出結果是

uj5u.com熱心網友回復：

檢查一下這個第三方庫。它將使你的生活更加舒適，就像我一樣。 https://www.npmjs.com/package/react-compound-timer

uj5u.com熱心網友回復：

這可能是由于你在同一個元素上通過id設定內容。

document.getElementById("tmr").innerHTML = ...;

ID對所有卡片專案的計時器都是一樣的，它取代了一個。

嘗試從道具中創建動態ID并使用它。

const Timer = （props）=> {
   const { timerId } = props;
   const timerEleId = `tmr${timerId}`;
   .
   .
   .
   document.getElementById(timerEleId).innerHTML=;
   .
   .
   .
   return (
    <div> 
      <span id={timerEleId}> </span>>
    </div>）。)
}

另外，你使用的是react，為什么要使用宣告式的方式通過id獲取元素并設定它呢？你應該在useEffects上使用狀態更新和ervals。類似的東西。用 reactjs 鉤子每 10 秒從外部 Api 獲取資料

標籤：

上一篇：在自定義鉤子中記憶函式引數

下一篇：ReactNative:更新useState()值