在react中点击按钮倒计时页面展示

在React中，可以使用useState和useEffect来实现一个点击按钮倒计时页面展示的功能。

首先，我们需要在组件中定义一个状态变量count来存储倒计时的时间。然后，使用useState来初始化count的初始值为0，并定义一个函数setCount来更新count的值。

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

function Countdown() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 每次count的值发生变化时，执行这里的代码
    if (count > 0) {
      // 使用定时器每隔1秒减少count的值
      const timer = setTimeout(() => {
        setCount(count - 1);
      }, 1000);

      // 清除定时器
      return () => clearTimeout(timer);
    }
  }, [count]);

  const handleButtonClick = () => {
    // 当按钮被点击时，将count的值设置为10
    setCount(10);
  };

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={handleButtonClick}>Start Countdown</button>
    </div>
  );
}

export default Countdown;

在上面的代码中，我们通过useEffect钩子函数监听count的变化。当count的值大于0时，使用setTimeout设置一个定时器，每隔1秒减少count的值。同时，通过返回一个清除定时器的函数来确保在组件被销毁时清除定时器。

当按钮被点击时，handleButtonClick函数会被调用，将count的值设置为10，从而开始倒计时。

最后，将Countdown组件渲染到页面中即可。

import React from 'react';
import Countdown from './Countdown';

function App() {
  return (
    <div>
      <Countdown />
    </div>
  );
}

export default App;

这样，当页面加载时，会显示一个初始值为0的倒计时。当点击按钮时，倒计时会开始，并在每秒钟减少1