使用 CSS 属性可见性的 React 闪烁文本答案

【问题标题】：A blinking text with React using the CSS property visibility使用 CSS 属性可见性的 React 闪烁文本
【发布时间】：2021-12-28 14:22:07
【问题描述】：

我想编写一个每秒闪烁的闪烁文本使用 React 抛出 CSS 属性（可见性），我想以这种确切的方法实现它，这是我想做的：

错在哪里？我也尝试了 setTimeout，但效果不佳。

import { useState, useEffect } from "react";

function Blink(props) {
  const [state, setState] = useState("hidden");

  useEffect(() => {

    setInterval(() => {

      setState("visible");
      console.log("changed");

    }, 1000);

    return () => clearInterval();
  }, [state]);

  return <span style={{ visibility: state }}>{props.children}</span>;

}


function App() {
  return <Blink>Hello World!</Blink>;
}

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

您的 setInterval 不会在“可见”和“隐藏”之间切换状态。它所做的一切都是一遍又一遍地将状态设置为“可见”。您需要考虑当前状态。我认为最简单的方法是将其设为布尔值 (useState(false))，然后在 setInterval 中设置为 setState(!state)。

那么你需要做的就是把样式改成{{ visibility: state ? 'hidden' : 'visible' }}。

【讨论】：

【解决方案2】：

您错过了清除状态（切换可见/隐藏）。我认为你应该尝试这样的事情：

setState(state == 'visible' ? 'hidden' : 'visible')

【讨论】：