javascript - 在 react 问题中加载 lottie-web 动画

Question

我试图在我的 React 项目中加载一个 lottie-web 动画，但我一直收到此错误并且无法理解它的含义

InvalidStateError: responseText is only available if responseType is '' or 'document'.

下面是我的 React 组件:

import React, { Component } from "react";
import "./Submit.css";
import PropTypes from "prop-types";
import lottie from "lottie-web";

class Submit extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    lottie.loadAnimation({
      container: document.getElementById("animation"), // the dom element that will contain the animation
      renderer: "svg",
      loop: true,
      autoplay: true,
      path: "../anim/email.json" // the path to the animation json
    });
  }

  render() {
    return <div id="animation" />;
  }
}

Submit.propTypes = {};

export default Submit;

有什么想法吗？

Answer 1

path 应该是 lottie 可以通过网络请求获取 JSON 的路径，而不是文件系统路径。

尝试将 email.json 放在 public 文件夹中，并仅使用 "/email.json"作为路径。您还可以在 render 方法中的元素上放置一个 ref 以使其成为完全模块化的组件。

示例

class Submit extends Component {
  ref = null;

  componentDidMount() {
    lottie.loadAnimation({
      container: this.ref,
      renderer: "svg",
      loop: true,
      autoplay: true,
      path: "/email.json"
    });
  }

  render() {
    return <div ref={ref => this.ref = ref} />;
  }
}