SnapSVGAnimator.js 在 React 网络应用程序中加载时产生错误

Question

Adobe 的 SnapSVG 扩展 Animate.cc 2017 能够为网络创建交互性和动画。我目前正在尝试在我的 REACT JS WebApplication 中使用导出的 SnapSVG Adobe Animate.cc 项目。

到目前为止我做了什么：

从 npm 导入 snapsvg-cjs（修改 snapsvg 以在 React 中成功使用）
导入 axios 以加载从 Animate.cc
从 SnapSVGAnimator 中排除带有 eslintignore 的缩小代码。 lib，在从 Animate.cc 发布 SVG 动画时生成以在没有 ESlinting 警告的情况下正常工作。
创建一个componentDidMount函数

当前代码：

import React, {Component} from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import { SVGAnim } from './SnapSVGAnimator.js';
import snapsvg from 'snapsvg-cjs';

  componentDidMount(){
    axios.get(jsonfile)
      .then(response => {
        const json = response.request.responseText;
        const comp = new SVGAnim(json);
        console.log(comp)
      });
  }

问题

登录时出现以下错误const comp。

Uncaught (in promise) TypeError: 
_SnapSVGAnimator.SVGAnim is not a constructor

Answer 1

在 Animate.cc 中的发布渲染期间，生成了两个库； snapsvg.js 和 SVGAnimator.js

您可以从 NPM 导入 snapsvg-cjs，但 SVGAnimator.js 不可用。使用 ES6 方法从 ReactApp 的 curtain 目录导入 SVGAnimator.js 是不可能的，即使将它排除在 /* eslint-disable */ 1000 警告仍然出现之外。

取而代之的是，将代码添加到您的 index.html 文件中，该文件位于 public 文件夹中（我使用 create-react-app 来构建这个项目）：

<script type="text/javascript" src="%PUBLIC_URL%/libs/SnapSVGAnimator.min.js"></script>

这是工作代码：

import React, { Component } from 'react';

//axios for asnyc usage*/
import axios from 'axios';

//Snapsvg-cjs works out of the box with webpack
import Snapsvg from 'snapsvg-cjs';

//snap.json is located in the public folder, dev-build folder(ugly approach).
let jsonfile = "snap.json";

class SVGAnimator extends Component {

  constructor(props){
    super(props);
    this.state = {
      data: ''
    }
  }
  componentDidMount(){
    axios.get(jsonfile)
      .then(response => {
        this.setState({ data: response.data })
      });
  }

  getSVG(){
    if(this.state.data){
      const container = document.getElementById('container');
      const SVG = new window.SVGAnim(this.state.data, 269, 163, 24)
      container.appendChild(SVG.s.node);
    }
  }

  render() {
    return (
      <div id="container">
        { this.getSVG()}
      </div>
    );
  }
}

export default SVGAnimator;

SnapSVGAnimator.js 在 React 网络应用程序中加载时产生错误

SnapSVGAnimator.js generates errors when loading in React web app

adobe

svg

svg-animate

reactjs

animate-cc