reactjs 我如何改变一个有时间范围的句子?

vyswwuz2  于 2023-01-04  发布在  React
关注(0)|答案(1)|浏览(116)

如何在React.js中更改带有时间范围的句子?
例如,我有一个10秒的间隔,它以一个句子开始,在第2秒它变成另一个句子,在第4秒它回到最初的句子
例如,我有一个10秒的间隔,它以一个句子开始,在第2秒它变成另一个句子,在第4秒它回到最初的句子

hrysbysz

hrysbysz1#

你需要这样的东西:

const [sentence, setSentence] = useState("First sentence");
  const intervalRef = useRef(null);

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      if (sentence === "First sentence") {
        setSentence("Second sentence");
      } else {
        setSentence("First sentence");
      }
    }, 2000);

    // Clear the interval
    setTimeout(() => {
      clearInterval(intervalRef.current);
    }, 11000); // Setting 11 because it would stop before the final change if it was 10

    return () => clearInterval(intervalRef.current);
  }, [sentence]);

  return <div>{sentence}</div>;

这将每2秒改变一次句子,总共10秒。使用ref就像一个计数器。

相关问题