React实现打字机效果~

执行上下文

发布于 2023-09-06 14:09:48

1K1

发布于 2023-09-06 14:09:48

文章被收录于专栏：执行上下文

项目中有一个地方用到打字机的效果，并且在文字显示完成之后可以选择是否自动跳转到下一步骤。另外这个打字机效果在多个页面模块中使用，区别是打字完成后是否跳转。

核心代码

useEffect(() => {
    let currentIndex = 0;
    const interval = setInterval(() => {
      if (currentIndex < originalText.length - 1) {
        setText((prevText) => prevText + originalText[currentIndex]);
        currentIndex++;
      } else {
        clearInterval(interval);
        if (destination && destination.trim() !== '') {
          timerRef.current = window.setTimeout(() => {
            navigate(destination);
          }, 1000); // 在1秒后跳转到目标页面
        }
      }
    }, 100);
    
    return () => {
      clearInterval(interval);
      if (timerRef.current) {
        clearTimeout(timerRef.current);
      }
    };
}, [originalText, destination, navigate]);

在useEffect中，用了一个定时器来逐个字符地将原始文本添加到当前文本中。每100毫秒添加一个字符，直到添加完整个原始文本。然后，我们清除定时器以停止动画。另外引入了useHistory钩子来获取路由的history对象。在useEffect中，当打字机效果完成后，用setTimeout函数来延迟1秒后执行跳转操作。

如何使用

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

const App: React.FC = () => {
  return (
    <div>
      <Typewriter originalText="Hello, World!" destination="/other-page" />
    </div>
  );
};

export default App;

其中 originalText 是需要打印的文本，destination 是文字打印完后需要跳转的页面。如果打印后停留当前页面则无需该参数。

实际效果

完整代码

import React, { useState, useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';

interface TypewriterProps {
  originalText: string;
  destination?: string;
}
const Typewriter: React.FC<TypewriterProps> = ({ originalText, destination }) => {
    const [text, setText] = useState('');
    const navigate = useNavigate();
    const timerRef = useRef<number | null>(null);

    ## 核心代码
    
    return (
        <div className="typewriter">
          <h1>{text}</h1>
        </div>
    );
};

export default Typewriter;

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2023-08-23，如有侵权请联系 cloudcommunity@tencent.com 删除

react