如何在React JSX中使用autoTyping.js实现打字动画效果

你的实现存在几个关键问题，导致动画无法渲染：

1. 初始化代码执行时机错误：直接在autotyping.js中调用exampleTyping.start()时，React组件尚未渲染，DOM中不存在#text元素，库无法找到目标节点。
2. JSX写法错误：React中不能使用class属性（需改为className），且组件内嵌套<script>标签和自定义<autotyping>组件不是正确的引入方式。
3. 模块导出/导入错误：该库默认是全局变量形式，不是ES模块，你直接import { autotyping }的方式无效。

下面是两种可行的正确集成方案：

方案一：将库转为ES模块使用 #

1. 修改src/autotyping.js，保留原库代码，新增一个导出的初始化函数：

// src/autotyping.js
// 原库的AutoTyping代码保持不变
var AutoTyping = function (e) { /* 原库完整代码 */ };

// 导出初始化函数，方便React组件调用
export function initAutoTyping(elementSelector, texts, options) {
  const typingInstance = new AutoTyping(elementSelector, texts, options);
  typingInstance.start();
  return typingInstance;
}

2. 在你的About组件中，利用useEffect钩子在组件挂载后（DOM渲染完成）初始化动画：

import { useEffect } from 'react';
import { initAutoTyping } from './autotyping'; // 路径根据实际文件位置调整

const About = () => {
  useEffect(() => {
    // 定义要切换的文本数组和配置项
    const textList = ['Fullstack.', 'FrontEnd', 'BackEnd', 'Designer'];
    const typingOptions = {
      typeSpeed: 50,
      deleteSpeed: 50,
      waitBeforeDelete: 2000,
      waitBetweenWords: 500,
    };

    // 初始化动画
    const typingInstance = initAutoTyping('#text', textList, typingOptions);

    // 组件卸载时停止动画，避免内存泄漏
    return () => {
      typingInstance.stop();
    };
  }, []); // 空依赖数组，确保只在组件挂载时执行一次

  return (
    <p id="text" className="text-red-500"></p>
  );
};

export default About;

方案二：全局引入库文件 #

如果不想修改库源码，可以直接在项目的入口HTML文件中引入库：

1. 将autotyping.js放到项目的public目录下，然后在public/index.html中添加：

<script src="%PUBLIC_URL%/autotyping.js"></script>

2. 在About组件中通过全局变量window.AutoTyping初始化动画：

import { useEffect } from 'react';

const About = () => {
  useEffect(() => {
    const textList = ['Fullstack.', 'FrontEnd', 'BackEnd', 'Designer'];
    const typingOptions = {
      typeSpeed: 50,
      deleteSpeed: 50,
      waitBeforeDelete: 2000,
      waitBetweenWords: 500,
    };

    const typingInstance = new window.AutoTyping('#text', textList, typingOptions);
    typingInstance.start();

    return () => typingInstance.stop();
  }, []);

  return (
    <p id="text" className="text-red-500"></p>
  );
};

export default About;

关键注意事项 #

• 必须在DOM元素渲染完成后再初始化库，useEffect钩子是React中处理这类DOM操作的标准方式。
• 组件卸载时记得调用stop()方法，避免内存泄漏。
• React中元素的类名必须用className替代原生的class属性。

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