admin管理员组文章数量:1667255
方法一:
import React, { useState, useEffect, useRef } from 'react';
const Typewriter = ({ text, speed }) => {
const [displayText, setDisplayText] = useState('');
const [isPaused, setIsPaused] = useState(false);
const [isTextFinished, setIsTextFinished] = useState(false);
const currentIndexRef = useRef(0);
useEffect(() => {
const intervalId = setInterval(() => {
if (!isPaused) {
setDisplayText((prevText) => {
if (currentIndexRef.current < text.length) {
return prevText + text[currentIndexRef.current++];
} else {
clearInterval(intervalId);
setIsTextFinished(true);
return prevText;
}
});
}
}, speed);
return () => clearInterval(intervalId);
}, [text, speed, isPaused]);
const handlePauseResume = () => {
setIsPaused((prevPaused) => !prevPaused);
if (!isPaused) {
currentIndexRef.current = currentIndexRef.current;
}
};
return (
<div>
<div>{displayText}</div>
{!isTextFinished && (
<button onClick={handlePauseResume}>
{isPaused ? '继续' : '暂停'}
</button>
)}
</div>
);
};
const App = () => {
const textToType = '请问,您是否需要帮助?我是一名程序员,您需要什么帮助?';
const typingSpeed = 100;
return (
<div>
<Typewriter text={textToType} speed={typingSpeed} />
</div>
);
};
export default App;
方法二: 参考这个
使用插件 typed.js Typed.js - Type your heart out
react 实现chatGPT的打印机效果 兼容富文本,附git地址_前端实现chartgpt打印机效果react-CSDN博客
版权声明:本文标题:react 实现chatGPT的打印机效果 ,类似chatgpt 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1730084036a1222155.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论