React 组件中函数 return 存储在哪里？

Question

我正在尝试在 React 组件中使用 anime.js。动画不能正常工作（不完全旋转，冻结，似乎跳过帧......）并且也受到 window 大小调整的影响，我调整得越多，动画变得越短，直到它冻结。

这是我的反应组件：

import React from "react";
import { SplitButton, MenuItem } from "react-bootstrap";
import * as animationOptions from "../../animations";

export default class ImageComponent extends React.Component {
    render() {

        let tttt = animationOptions.textAnim1();
        let iiii = animationOptions.imageAnim1();
        console.log(tttt);


        return (
            <div>

                <div id="canvas">
                    <p id="text" className="tttt">some text</p>
                    <image id="image" className="iiii" src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" />
                </div>
            </div>
        );
    }
}

我导入的动画：

import anime from "animejs";

export function textAnim1(){ return anime({
    targets: '#text',
    rotate: 360,
    duration: 2000,
    loop: true,
    autoplay:true,
  });
 }; 

export function imageAnim1(){ return anime({
    targets: '#image',
    translateX: 250,
    duration: 4300,
    loop: true,
    autoplay:true,
  });
};

不确定问题是出在我如何导出函数动画还是我如何定义保存函数的变量 return...没有错误，但这是 [=14= 的日志]:

这是 anime.js 上的基本示例： https://github.com/juliangarnier/anime/

请注意，我需要 tttt 在组件中可用，以触发函数 return let tttt = animationOptions.textAnim1();[ 中的 tttt.play() 或 .pause() 等方法=20=]

Answer 1

这将起作用：

componentDidMount(){
  animationOptions.textAnim1();
  animationOptions.imageAnim1();
}

render(){
  return (
    <div>
      <div id="canvas">
        <p id="text" >some text</p>
        <img id="image" src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" />
      </div>
    </div>
    );
  }
}

检查 CodeSandbox 上的运行代码。

React 组件中函数 return 存储在哪里？

Where to store function return in React component?

javascript

reactjs

anime.js