Question

我有一个渲染网格元素的功能组件。我想通过HOC包装将Anime.js动画赋予该组件。问题是“我如何以正确的方式实现它以及如何从WrappedComponent中选择所需的目标元素？”。

const pathToConfig =  path.resolve(__dirname, '../res/config.json')

Answer 1

在父组件中创建一个ref并将其传递给包装的组件，并用作targets：

import React, { PureComponent } from "react";
import anime from "animejs/lib/anime.es.js";

function withAnimation(WrappedComponent) {
  return class extends PureComponent {
    constructor() {
      super();

      // create DOM reference
      this.target1 = React.createRef();
    }

    handleAnimation = () => {
      anime({
        targets: this.target1,
        translateY: [-30, 0],
        easing: "easeInOutQuad",
        duration: 2000
      });
    };

    componentWillMount() {
      this.handleAnimation();
    }

    setTarget = el => {
      this.target1 = el;
    };

    render() {
      return <WrappedComponent setTarget={this.setTarget} {...this.props} />;
    }
  };
}

const WrappedComponent = props => {
  return <div ref={el => props.setTarget(el)}>Animate me</div>;
};

export default withAnimation;

具有React高阶组件的Anime.js动画

1 个答案: