Question

根据GatsbyJS的创造者，这似乎是一个普遍的问题。以下是GitHub回购中已解决问题的引用：

您有引用窗口对象的代码（您自己或您正在使用的模块）。当服务器呈现时，如果您不在浏览器中，那么这会失败，因此窗口不存在。这是一个相当普遍的问题。解决方案是对componentDidMount中的窗口运行代码引用，您可以确定它现在位于浏览器中。

我只看到一些例子在ReactJS中设置AOS或在GatsbyJS中设置类似的东西，但没有什么我需要的。我提出的配置不适用于生产构建又名“gatsby build”......这是我的代码：

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

我尝试了一些变体，我在props构造函数中将一个变量设置为AOS，然后使用componentDidMount将变量设置为AOS.init（），也尝试使用this.state并设置但没有任何区别。那么做什么是正确的方法是什么？我知道我将使用componentDidMount，但除此之外我不知道。非常感谢任何帮助...

Answer 1

我终于意识到我已经忘记了另一个首发Gatsby项目是如何处理Wow.js的...这是根据他们在Gatstrap，Gatsby首发博客中的例子解决我的问题：

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

componentDidUpdate() {
    this.aos.refresh()
}

希望这有助于其他人！

Answer 2

我使用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();
    }
  });

GatsbyJS / ReactJS＆amp; AOS（滚动动画）导致构建问题

2 个答案: