用于响应类/组件的普通JavaScript

我是个新手，这是我的第一个网站，我在网上找到了一些JavaScript计划，可以在一段时间内输入和更新一个单词。我已经把它做成了一个组件。但我不知道如何将此JavaScript函数转换为react代码

这是我的新组件

import React, {Component} from 'react';

class Hero extends Component {
    render () {
        return (
           <div>
            <section id="hero" className="d-flex flex-column justify-content-center align-items-center">
                <div className="hero-container" data-aos="fade-in">
                    <h1>Augusto J. Rodriguez</h1>
                    <p>I'm a <span className="typed" data-typed-items="opption1, opption2, opption3, opption4"></span></p>
                </div>
            </section>
           </div>  
        );
    }
}

export default Hero;

我假设我需要在标记所在的位置创建一个函数。但我不知道如何在反应中做到这一点

---

任何一篇文章的参考都会非常棒，或者是关于如何解决这个问题的技巧。我有这个项目的完整代码。

看起来这段代码正在使用一个名为Typed.js的库

通过查看您的项目，我看到您在public/assets/vendor文件夹中设置了Typed.js库。相反，我建议使用NPM软件包管理器来安装和设置Typed.js，并复制代码以实现React方式

下面是一个使用Typed.js和React的示例

类TypedReactDemo扩展了React.Component{ 组件安装{ //如果你想通过道具传递更多选项，只需添加 //你想要的道具来完成这个任务。 const{strings}=this.props； //您可以在此处传递其他选项，例如键入速度、返回速度等。 常量选项={ 弦：弦， 打字速度：50， 后退速度：50 }; //this.el指的是渲染方法中的 this.typed=新类型this.el，选项； } 组件将卸载{ //请确保在卸载时销毁类型化实例 //防止内存泄漏 这是破坏； } 渲染{ 回来 Typed.js {this.el=el；}} /> this.typed.toggle}>toggle this.typed.start}>start this.typed.stop}>stop this.typed.reset}>reset this.typed.destroy}>destroy ; } } ReactDOM.render , document.getElementById'react-root' ;

---

看起来这段代码正在使用一个名为Typed.js的库

通过查看您的项目，我看到您在public/assets/vendor文件夹中设置了Typed.js库。相反，我建议使用NPM软件包管理器来安装和设置Typed.js，并复制代码以实现React方式

下面是一个使用Typed.js和React的示例

类TypedReactDemo扩展了React.Component{ 组件安装{ //如果你想通过道具传递更多选项，只需添加 //你想要的道具来完成这个任务。 const{strings}=this.props； //您可以在此处传递其他选项，例如键入速度、返回速度等。 常量选项={ 弦：弦， 打字速度：50， 后退速度：50 }; //this.el指的是渲染方法中的 this.typed=新类型this.el，选项； } 组件将卸载{ //请确保在卸载时销毁类型化实例 //防止内存泄漏 这是破坏； } 渲染{ 回来 Typed.js {this.el=el；}} /> this.typed.toggle}>toggle this.typed.start}>start this.typed.stop}>stop this.typed.reset}>reset this.typed.destroy}>destroy ; } } ReactDOM.render , document.getElementById'react-root' ;

---

看起来您当前正在使用“类型化”库创建此类型化列表。有一些社区软件包可以作为React包装器，如下所示：

或者，您可以自己执行该库所做的操作，方法是在对componentDidMount的调用中加载“typed”包，传入React引用而不是DOM元素

---

顺便说一句，目前您的代码使用分配给变量$jQuery，因此它不是很普通。您可以将对$的调用替换为对document.querySelector的调用，以使这成为一个简单的JS，尽管您的代码可能依赖于其他地方的jQuery

看起来您当前正在使用“类型化”库来创建此类型化列表。有一些社区软件包可以作为React包装器，如下所示：

或者，您可以自己执行该库所做的操作，方法是在对componentDidMount的调用中加载“typed”包，传入React引用而不是DOM元素

---

顺便说一句，目前您的代码使用分配给变量$jQuery，因此它不是很普通。您可以将对$的调用替换为对document.querySelector的调用，以实现这一目标，尽管您的代码可能依赖于其他地方的jQuery

我认为您希望在React应用程序中使用一些基于jQuery的脚本，但由于不同的原因，这些脚本无法以这种方式工作。阅读本文，我认为您希望在React应用程序中使用一些基于jQuery的脚本，但由于不同的原因，这些脚本无法以这种方式工作。阅读示例。这里还有一个现有的react版本的typed.js，非常感谢。我感谢你的帮助。我会深入研究的

---

此外，这里还有一个现有的react版本的typed.js，非常感谢。我感谢你的帮助。我将进一步深入研究这个问题。这是基于我找到的一个引导模板，并试图更好地理解编程。所以尝试将其切换到react站点。我不是一个开发人员，我是一个系统的家伙，所以这只是为了获得额外的知识和对东西更深入的理解。这是基于我找到的引导模板，并试图更好地理解编程。所以尝试将其切换到react站点。我不是一个开发人员，我是一个系统的家伙，所以这只是为了额外的知识和更深入的了解的东西。

  if ($('.typed').length) {
    var typed_strings = $('.typed').data('typed-items');
    typed_strings = typed_strings.split(',')
    new Typed('.typed', {
      strings: typed_strings,
      loop: true,
      typeSpeed: 100,
      backSpeed: 50,
      backDelay: 2000
    });
  }