React 组件中的函数返回存储在哪里？答案

【问题标题】：Where to store function return in React component?React 组件中的函数返回存储在哪里？
【发布时间】：2018-03-15 13:13:32
【问题描述】：

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

这是我的反应组件：

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,
  });
};

不确定问题在于我如何导出函数动画或如何定义保存函数返回的变量......没有错误，但这里是 let tttt 的日志：

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

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

【问题讨论】：

为什么要将tttt 分配给className？
够奇怪了，不管定义class="tttt" / className="tttt" / class={tttt} 还是className ={tttt}，结果总是一样的！！！（总之我在测试...）
试试style={ttt}。
行为方式完全相同...

标签： javascript reactjs anime.js

【解决方案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 上查看正在运行的代码。

【讨论】：