// 组件
import React, { useState, useEffect } from 'react';
const TypewriterText: React.FC<{ textToDisplay: string }> = ({ textToDisplay }) => {
const [displayedText, setDisplayedText] = useState('|');
useEffect(() => {
let currentIndex: number = 0;
const interval = setInterval(() => {
setDisplayedText(textToDisplay.substring(0, currentIndex));
currentIndex++;
if (currentIndex > textToDisplay.length) {
clearInterval(interval);
}
}, 20);
return () => clearInterval(interval);
}, [textToDisplay]);
return <span>{displayedText}</span>;
};
export default TypewriterText;
// 引入组件
import TypewriterText from './typewriterText';
<TypewriterText textToDisplay={"这是一段文字描述"} />
React 实现一段文字按单个字依次显示
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 2017年12月31日那天，微博、空间、朋友圈 好多人都在晒自己18岁的照片，我才知道最后一批90...
- 前言 /1240) 如上图所示功能实现，有两种方法实现： （1）直接几个textview拼接成一段文字进行实现；这...
- 如上图，这种效果看着是不是挺“柔”的附代码 这里主要分两步 第一步 利用setTimeout的延时效果依次将文字显...
- A1 2个小时前，客户销售员找我谈单价。希望每个产品都能降20元。"你自己生产吧"我非常愤怒地说。 ...
