admin管理员组文章数量:1667083
方法一：
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://www.elefans.com/dongtai/1730084036a1222155.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论