React中如何为Typewriter打字机效果的文本添加跳转链接？

你之前尝试直接加href、绑定onClick不生效，核心原因是typeString()方法仅支持解析纯文本或原生HTML字符串，无法识别React JSX语法、React事件绑定逻辑，直接写React属性不会被渲染生效。

方案1：原生HTML快速实现（适合无路由库/可接受整页跳转场景） #

直接将带链接的文本拼接为原生HTML字符串传入typeString即可，href属性替换为你「关于我」页面的实际访问路径：

<Typewriter
  onInit={(typewriter) => {
    typewriter
      .typeString("Hi")
      .pauseFor(1000)
      .deleteAll()
      .typeString('<a href="/about" style="color: #2563eb; text-decoration: underline; cursor: pointer;">Learn More about me</a>') 
      .start();
  }}
/>

如果需要自定义链接样式，可以给a标签加class名，在对应CSS文件中编写样式规则即可。

方案2：React Router单页无刷新跳转方案 #

如果你的项目用了react-router-dom等路由库，想要保留单页应用无刷新跳转的体验，可以在打字完成后通过原生DOM绑定导航事件：

import { useNavigate } from 'react-router-dom';
import Typewriter from 'typewriter-effect';

export default function HomePage() {
  const navigate = useNavigate();

  return (
    <Typewriter
      onInit={(typewriter) => {
        typewriter
          .typeString("Hi")
          .pauseFor(1000)
          .deleteAll()
          .typeString('<a id="about-link" style="color: #2563eb; text-decoration: underline; cursor: pointer;">Learn More about me</a>')
          // 打字完成回调中绑定点击事件
          .callFunction(() => {
            const linkNode = document.getElementById('about-link');
            if (linkNode) {
              linkNode.addEventListener('click', (e) => {
                e.preventDefault();
                navigate('/about'); // 替换为你的关于我页面对应路由
              })
            }
          })
          .start();
      }}
    />
  )
}

注意事项 #

• 不要直接在typeString中传入<Link />这类React组件，也不要直接在字符串里写onClick={xxx}这类React事件绑定语法，这类内容不会被框架解析，只会作为纯文本渲染。
• 如果需要给链接加交互态（比如hover变色），直接给a标签配置class后写CSS即可，和普通网页元素写法一致。

内容的提问来源于stack exchange，提问作者Nayma