GatsbyJS/ReactJS & AOS(滚动动画)导致构建问题

Question

根据Gatsbyjs的创建者，这似乎是一个常见的问题。这是GitHub repo上解决问题的报价：

您有代码（您自己使用的代码或正在使用的模块），它引用了窗口对象。当您不在浏览器中，因此当服务器渲染时，这将失败，因此窗口不存在。这是一个相当普遍的问题。解决方案是将代码引用到componentdidmount中的窗口中，您可以在其中确定您现在正在浏览器中。

我只看到少数几个示例在ReactJ中设置AO或在Gatsbyjs中设置了类似的内容，但没有我需要的东西。我提出的配置只是为生产构建又称"盖茨比构建"不起作用...这是我的代码：

import React from 'react'
import {Link} from 'react-router'
import {prefixLink} from 'gatsby-helpers'
import {config} from 'config'
import AOS from 'aos'
import '../static/css/reset.css'
import '../static/css/typography.css'
import '../static/css/base.css'
import '../static/css/w3.css'
import '../static/css/aos.css'
import '../static/css/devicons.css'
class Template extends React.Component {
componentDidMount() {
  AOS.init()
}
render() {
    const {location, children} = this.props
    return (
        <div>
            <div className='wrapper'>
                {children}
            </div>
        </div>
    );
}
}
Template.propTypes = {
    children: React.PropTypes.any,
    location: React.PropTypes.object,
    route: React.PropTypes.object
}
export default Template

我尝试了一些变体，其中我在aos中设置了道具构造函数中的变量，然后使用componentdidmount将变量设置为aos.init（），也尝试使用此。那么，要做什么的正确方法是什么？我知道我将使用ComponentDidmount，但除此之外，我不知道。任何帮助都非常感谢...

Answer 1

我终于意识到我已经忘记了另一个首发球员盖茨比项目如何处理wow.js ...这就是我的问题，这是基于他们在Gatstrap，Gatsby Starter Blog中的示例：

componentDidMount() {
    const AOS = require('aos');
    this.aos = AOS
    this.aos.init()
}
componentDidUpdate() {
    this.aos.refresh()
}

希望这对别人有帮助！

Answer 2

i使用React Hooks（16.8 ）

解决了它

let AOS;
  useEffect(() => {
    /**
     * Server-side rendering does not provide the 'document' object
     * therefore this import is required either in useEffect or componentDidMount as they
     * are exclusively executed on a client
     */
    const AOS = require("aos");
    AOS.init({
      once: true,
    });
  }, []);
  useEffect(() => {
    if (AOS) {
      AOS.refresh();
    }
  });

Answer 3

我修改了 @floroz的答案，因为我为他看到的AOS总是在第一个使用效果之外不确定，在这里代码

let AOS;
  useEffect(() => {
    AOS = require("aos");
    AOS.init();
  }, [])
  useEffect(() => {
    if (AOS) {
      AOS.refresh();
    }
  });