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;