用于反应类/组件的 Vanilla JavaScript

Question

我是新手，这是我的第一个网站，我在网上找到了一些计划 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;

这是我想在我的代码中使用的原版 JavaScript。目前这存在于从 index.html 调用的 main.js 文件中。这是代码中唯一不起作用的部分。

  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
    });
  }

我假设我需要创建一个函数，其中我的

标签是。但我不确定如何在 React 中做到这一点。

任何文章参考都会很棒或有关如何解决此问题的提示。我在GitHub 上有这个项目的完整代码。

Answer 1

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

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

这是一个将 Typed.js 与 React 结合使用的示例。 https://jsfiddle.net/mattboldt/ovat9jmp/

class TypedReactDemo extends React.Component {
  componentDidMount() {
    // If you want to pass more options as props, simply add
    // your desired props to this destructuring assignment.
    const { strings } = this.props;
    // You can pass other options here, such as typing speed, back speed, etc.
    const options = {
        strings: strings,
      typeSpeed: 50,
      backSpeed: 50
    };
    // this.el refers to the <span> in the render() method
    this.typed = new Typed(this.el, options);
  }

  componentWillUnmount() {
    // Make sure to destroy Typed instance on unmounting
    // to prevent memory leaks
    this.typed.destroy();
  }

  render() {
    return (
      <div className="wrap">
        <h1>Typed.js</h1>
        <div className="type-wrap">
          <span
            style={{ whiteSpace: 'pre' }}
            ref={(el) => { this.el = el; }}
          />
        </div>
        <button onClick={() => this.typed.toggle()}>Toggle</button>
        <button onClick={() => this.typed.start()}>Start</button>
        <button onClick={() => this.typed.stop()}>Stop</button>
        <button onClick={() => this.typed.reset()}>Reset</button>
        <button onClick={() => this.typed.destroy()}>Destroy</button>
      </div>
    );
  }
}

ReactDOM.render(
    <TypedReactDemo
    strings={[
        'Some <i>strings</i> are slanted',
      'Some <strong>strings</strong> are bold',
      'HTML characters &times; &copy;'
    ]}
  />,
  document.getElementById('react-root')
);

Answer 2

目前您似乎正在使用“类型化”库来创建此类型化列表。有一些社区包可以作为 React 包装器，比如这个：

https://www.npmjs.com/package/react-typed

或者，您可以自己执行该库所做的事情，方法是在对 componentDidMount 的调用中加载“类型化”包，传入 React ref 而不是 DOM 元素。

顺便说一句，目前您的代码使用 jQuery（分配给变量 $），所以它不是很普通的 JS。您可以用对 document.querySelector 的调用替换对 $ 的调用，以制作这个 vanilla JS（尽管您的代码可能依赖于其他地方的 jQuery）