当前位置：首页 > React

react如何连续打印

2026-02-11 15:39:55React

在 React 中连续打印内容

在 React 中实现连续打印效果可以通过多种方式完成，以下是几种常见的方法：

使用 `setInterval` 或 `setTimeout`

可以通过 JavaScript 的定时器函数实现连续打印效果。创建一个状态变量存储当前显示的文本，然后通过定时器逐步更新。

react如何连续打印

import React, { useState, useEffect } from 'react';

function ContinuousPrint() {
  const [text, setText] = useState('');
  const fullText = 'Hello, this is a continuous printing effect!';
  let index = 0;

  useEffect(() => {
    const timer = setInterval(() => {
      if (index < fullText.length) {
        setText(prev => prev + fullText[index]);
        index++;
      } else {
        clearInterval(timer);
      }
    }, 100); // 控制打印速度，单位为毫秒

    return () => clearInterval(timer);
  }, []);

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

export default ContinuousPrint;

使用 CSS 动画

通过 CSS 的 @keyframes 和 animation 属性可以实现类似打字机的效果。

react如何连续打印

import React from 'react';
import './ContinuousPrint.css';

function ContinuousPrint() {
  const text = 'Hello, this is a continuous printing effect!';

  return (
    <div className="typing-effect">
      {text}
    </div>
  );
}

export default ContinuousPrint;

/* ContinuousPrint.css */
.typing-effect {
  width: fit-content;
  overflow: hidden;
  border-right: 2px solid #000;
  white-space: nowrap;
  animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #000 }
}

使用第三方库

可以借助第三方库如 react-typewriter-effect 或 react-typical 快速实现连续打印效果。

import React from 'react';
import Typewriter from 'typewriter-effect';

function ContinuousPrint() {
  return (
    <Typewriter
      options={{
        strings: ['Hello', 'This is', 'A continuous printing effect!'],
        autoStart: true,
        loop: true,
      }}
    />
  );
}

export default ContinuousPrint;

动态加载数据并打印

如果需要从 API 或动态数据源加载内容并连续打印，可以结合 fetch 和定时器实现。

import React, { useState, useEffect } from 'react';

function ContinuousPrint() {
  const [text, setText] = useState('');
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  useEffect(() => {
    let index = 0;
    const timer = setInterval(() => {
      if (index < data.length) {
        setText(prev => prev + data[index]);
        index++;
      } else {
        clearInterval(timer);
      }
    }, 100);

    return () => clearInterval(timer);
  }, [data]);

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

export default ContinuousPrint;