Question

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

到目前为止我做了什么：

从npm导入snapsvg-cjs（修改了snapsvg以在React中使用succesfull）
导入axios以加载从Animate.cc中的SnapSVG扩展程序生成的自定义json文件
使用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中的窗帘目录导入SVGAnimator.js是不可能的，甚至不能通过使用/ * eslint-disable * / 1000警告仍然会出现在linting中将其排除。

而不是这样，将代码添加到index.html文件中，该文件位于公用文件夹中（我使用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;

在React Web应用程序中加载时，SnapSVGAnimator.js会生成错误

1 个答案: