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

Question

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

什么我迄今所做的：

1. 进口来自NPM snapsvg-CJS（修改snapsvg使用在阵营succesfull）
2. 进口爱可信加载从SnapSVG扩展在生成的自定义JSON文件Animate.cc

3. 从SnapSVGAnimator中排除eslintignore的缩小代码。 lib，在从Animate.cc发布SVG动画时生成，无需ESlinting警告即可正常工作。

4. 创建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不可用。从ReactApp的curtain目录中导入SVGAnimator.js与ES6方法是不可能的，即使通过/ * eslint-disable */1000仍然出现警告仍然排除它。

取而代之的是，该代码添加到您的index.html文件，位于公用文件夹这样 （我用创建反应的应用程序内建立这个项目）：

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