使用node_modules實現Typed.js遇到麻煩

Question

我在使用react和Node.JS的網站中實現typed.js時遇到問題

我一直嘗試為typed.js導入節點模塊。 這是我不斷回到的基本語法，但是我似乎永遠無法使它起作用。

"use strict"
import React from "react";

var $ = require("jquery")
var typed = require("typed.js")


$(function() {
  typed.typed( {
    strings: ["Text Data", "More Text Data"],
    typeSpeed: 70,
    backSpeed: 75,
    loop: true,
  });
});

export default function AboutMe( {typed}) {
  return (
    <div className="AboutMe">
      <h1>I am <span id="typed"></span>
      </h1>
    </div>
  );
}

我希望能夠導入和處理數據。 但是不斷出現諸如TypeError之類的錯誤：typed.typed不是函數

Answer 1

存在多個問題：

• 程序包中沒有typed函數，這是您需要初始化的類，這就是為什么在控制台中出現此錯誤的原因
• 您忘記將目標節點的ID作為第一個參數傳遞
• 您正在嘗試執行功能，然后再將任何內容寫入DOM

安裝組件后，我將使用react生命周期執行lib。

使用ES6，您可以使其工作如下：

import React, { Component } from 'react';
import Typed from 'typed.js';

const animateText = () => (
  new Typed('#typed', {
    strings: ["Text Data", "More Text Data"],
    typeSpeed: 70,
    backSpeed: 75,
    loop: true,
  })
);

// Class component so you can use `componentDidMount` lifecycle 
export default class AboutMe extends Component {
  componentDidMount() {
    // Will be executed after first `render`
    animateText();
  }

  render() {
    return (
      <div className="AboutMe">
        <h1>I am <span id="typed" /></h1>
      </div>
    );
  }
}

在這里觀看它的工作： https : //codesandbox.io/s/react-sandbox-cs84i?fontsize=14