使用node_modules实现Typed.js遇到麻烦

Question

I am having trouble implementing typed.js into my website that uses react and Node.JS

I keep attempting to import the node module for typed.js. This is the basic syntax I kept coming back to, but I could never seem to make it work.

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

I want to be able to import and manipulate the data. But continually keep getting the errors such as TypeError: typed.typed is not a function

Answer 1

There's multiple issues:

• There's no typed function in the package, it's a class you need to initialize, that's why you have this error in console
• You forgot to pass the id of your targeted node as first argument
• You're trying to execute the function before writing anything to the DOM

I would use the react lifecycle to execute the lib after mounting the component.

Using ES6 you can make it work like this:

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

Watch it work here: https://codesandbox.io/s/react-sandbox-cs84i?fontsize=14