使用react-simple-typewriter遇JSX语法错误及循环失效问题求助

问题根源分析 #

• 组件结构冗余且不符合Hook规则：你在Intro组件内部嵌套定义了MyComponent但未渲染，且Hook必须在函数组件顶层调用，这种嵌套写法直接导致JSX解析报错（Unexpected token）。
• 配置参数语法错误：useTypewriter的loop参数接受布尔值（true/false）或数字（指定循环次数），你写成loop: {3}是无效的对象语法，会导致循环配置失效。
• 未渲染生成的动画文本：调用Hook后获取了text变量，但未在JSX中插入该变量，因此动画内容无法显示。

修正后的代码 #

import "./intro.scss"
import React from 'react'
import { useTypewriter } from 'react-simple-typewriter';

export default function Intro() {
  // 在组件顶层直接调用Hook，修正loop配置
  const { text } = useTypewriter({
    words: ['Hello', 'From', 'Typewriter', 'Hook!'],
    loop: 3 // 指定循环3次，改为loop: true可实现无限循环
  })

  return (
    <div className="intro" id="intro">
      <div className="left">
        <div className="imgContainer">
          <img src="assets/stoned1.png" alt="个人头像"/>
        </div>
      </div>

      <div className="right">
        <div className="wrapper">
          <h2>Hello, I'm</h2>
          <h1>STONEd_NFT</h1>
          {/* 插入打字机动画生成的文本 */}
          <h3>Freelance {text}</h3>
        </div>

        <a href="#portfolio">
          <img src="assets/down.png" alt="向下跳转至作品集"/>
        </a>
      </div>
    </div>
  )
}

修改说明 #

1. 移除冗余的嵌套组件，将useTypewriter直接放在Intro组件顶层调用，符合React Hook的调用规范。
2. 修正loop参数的写法，确保配置生效。
3. 在<h3>标签中插入{text}变量，让打字机动画文本正常显示。

补充：组件方式循环问题的解决 #

如果后续再使用组件方式实现打字机，确保loop参数配置正确即可解决首次动画后循环中断的问题，示例代码如下：

import { Typewriter } from 'react-simple-typewriter'

<Typewriter
  words={['Hello', 'From', 'Typewriter', 'Component!']}
  loop={3} // 或loop={true}开启无限循环
  cursor
  cursorStyle='_'
  typeSpeed={70}
  deleteSpeed={50}
  delaySpeed={1000}
/>

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