JSON-формат SVG внутри React Component

Question

Я использовал расширение bodymovin для AfterEffects, чтобы создать анимацию и экспортировать ее в формате JSON, совместимом с Интернетом. Я попытался выполнить это пошаговое руководство, чтобы выяснить, как включить его в компонент: https://gist.github.com/prettyhandsome/caa7386dcda76fde28cf5d2a07a12082

Однако мне не повезло. Есть ли хороший пошаговый онлайн-ресурс о том, как включить JSON в качестве изображения в компонент React? Вот моя неудачная попытка:

import React, { Component } from 'react';
import Plx from 'react-plx';
import PropTypes from 'prop-types';
import bodymovin from 'bodymovin';
import animationData from '../../animations/test.json';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { skyChange } from './redux/actions';



export class Home extends Component {
  static propTypes = {
    home: PropTypes.object.isRequired,
    actions: PropTypes.object.isRequired,
  };

  componentDidMount() {
    this.attachAnimation();
  }

  animationIsAttached = false;
  const animationProperties = {
    //the is the DOM element that you would like to attach your animation to
    container: this.animationContainer,
    //the renderer options are  svg, canvas, or html
    renderer: 'svg',
    //true plays the animation in a continuous loop
    loop: true,
    //true plays the animation when the view loads
    autoplay: true,
    //the JSON data, which we imported above
    animationData: animationData
  }
  attachAnimation = () => {
    if (this.animationContainer !== undefined && !this.animationIsAttached) {
      const animationProperties = {
        container: this.animationContainer,
        renderer: 'svg',
        loop: true,
        autoplay: true,
        animationData: animationData
      }

      bodymovin.loadAnimation(animationProperties);
    }
  }


  render() {

    const { skyState, splashState } = this.props.home;
    const { skyChange } = this.props.actions;



    return (
      <div className="testing-animation">
         <h1> Animation Attempt </h1>
         <div style={{width: 50, height: 50}} ref={(animationDiv) => { this.animationContainer = animationDiv; }}/>
         </div>
       </div>
    );
  }
}

/* istanbul ignore next */
function mapStateToProps(state) {
  return {
    home: state.home,
  };
}

/* istanbul ignore next */
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({ skyChange }, dispatch)
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Home);

Answer 1

Замените код -

      animationData: animationData

к

      animationData: animationData.default