SnapSVGAnimator.js генерирует ошибки при загрузке в веб-приложение React

Расширение SnapSVG для Adobe Animate.cc 2017 способно создавать интерактивность и анимацию для Интернета. В настоящее время я пытаюсь использовать экспортированный проект SnapSVG Adobe Animate.cc в своем веб-приложении REACT JS.

Что я уже сделал:

  1. Импортированные snapsvg-cjs из npm (модифицированные snapsvg для успешного использования в React)
  2. Импортированные аксиомы для загрузки пользовательского файла json, сгенерированного из расширения SnapSVG в Animate.cc.

  3. Исключен минифицированный код с eslintignore из SnapSVGAnimator. lib, сгенерированный при публикации SVG-анимации из Animate.cc, для правильной работы без предупреждений 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

reactjs svg adobe animate-cc svg-animate
person WDP    schedule 15.08.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Во время рендеринга публикации в Animate.cc создаются две библиотеки; snapsvg.js и SVGAnimator.js

Вы можете импортировать snapsvg-cjs из NPM, но SVGAnimator.js недоступен. Импорт SVGAnimator.js с подходом ES6 из каталога занавески в вашем ReactApp невозможен, даже если исключить его из линтинга с помощью /* eslint-disable */ 1000 предупреждений все еще появляется.

Вместо этого добавьте код в свой файл 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;
person WDP    schedule 17.08.2017