如何根据计时器在react中显示和不显示span标记

import React, { useState } from 'react';

function TimerComponent() {
  const [showSpan, setShowSpan] = useState(false);

  // 其他组件代码...

  return (
    <div>
      {showSpan && <span>计时器已启动</span>}
      {/* 其他组件内容 */}
    </div>
  );
}

export default TimerComponent;

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

function TimerComponent() {
  const [showSpan, setShowSpan] = useState(false);

  useEffect(() => {
    const timer = setInterval(() => {
      // 计时器回调函数
      setShowSpan((prevShowSpan) => !prevShowSpan); // 切换显示和隐藏
    }, 1000);

    return () => {
      clearInterval(timer); // 组件卸载时清除计时器
    };
  }, []);

  return (
    <div>
      {showSpan && <span>计时器已启动</span>}
      {/* 其他组件内容 */}
    </div>
  );
}

export default TimerComponent;