用 React 创建引人注目的倒计时功能：步步深入的指南

前端

2024-02-05 05:54:57

巧用 React 创建倒计时组件，提升用户体验

什么是 React？

React 是一个颇受欢迎的 JavaScript 框架，因其组件化和声明式编程风格而闻名。使用 React，我们可以轻松构建复杂的 UI，包括倒计时功能。

倒计时功能的应用场景

倒计时功能在许多场景中都有用武之地，例如：

验证码发送
限时促销
竞赛活动

通过倒计时，用户可以清晰地了解剩余时间，从而增强参与感和紧迫感。

使用 React 创建倒计时组件

要创建倒计时组件，我们可以：

import React, { useState, useEffect } from "react";

const Countdown = ({ initialTime }) => {
  const [timeRemaining, setTimeRemaining] = useState(initialTime);

  useEffect(() => {
    if (timeRemaining > 0) {
      setTimeout(() => {
        setTimeRemaining(timeRemaining - 1);
      }, 1000);
    }
  }, [timeRemaining]);

  return (
    <div>
      <h1>{timeRemaining}</h1>
    </div>
  );
};

export default Countdown;

使用倒计时组件

我们可以将这个组件用于各种应用程序。例如，创建一个验证码发送页面，在用户点击“发送验证码”按钮后显示一个倒计时，指示验证码的有效期。

import React, { useState } from "react";
import Countdown from "./Countdown";

const SendVerificationCode = () => {
  const [sentCode, setSentCode] = useState(false);

  const sendCode = () => {
    setSentCode(true);
  };

  return (
    <div>
      <h1>验证码发送</h1>
      {sentCode ? (
        <Countdown initialTime={60} />
      ) : (
        <button onClick={sendCode}>发送验证码</button>
      )}
    </div>
  );
};

export default SendVerificationCode;