GatsbyJS / ReactJS& AOS（滚动动画）导致构建问题 [英] GatsbyJS/ReactJS & AOS(animate on scroll) causing build problems

问题描述

根据GatsbyJS的创建者，这似乎是一个常见问题。以下是GitHub存储库上已解决问题的报价：

This seems to be a common problem according to the creator of GatsbyJS. Here's a quote from a resolved issue on the GitHub repo:

您有代码（您自己的代码或所使用的模块）引用窗口对象。当服务器渲染（因为您不在浏览器中，因此窗口不存在）时，此操作将失败。这是一个相当普遍的问题。解决方案是在componentDidMount中运行对窗口的代码引用，您可以确保您现在在浏览器中。

You have code (either your own or a module you're using) which is referencing the window object. This fails when server rendering as you're not in a browser so window doesn't exist. This is a fairly common problem. The solution is to run code references to the window in componentDidMount where you can be sure you're now in a browser.

我仅见过少数几个示例，这些示例在ReactJS中设置AOS或在GatsbyJS中设置类似的东西，但没有我需要的东西。我提出的配置不适用于生产版本，也称为 gatsby构建 ...这是我的代码：

I've seen only a handful of examples setting up AOS in ReactJS or setting up similar things in GatsbyJS but nothing exactly what I need. The config I've come up with just doesn't work for the production build aka "gatsby build" ... Here's my code:

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，但除此之外，我不知道。非常感谢任何帮助...

I've tried a few variations where I set a variable in the props constructor to AOS then use componentDidMount to set the variable to AOS.init(), also tried using this.state and setting that but neither made any difference. So what's the proper way to do what's required? I know I'm going to use componentDidMount but beyond that I dunno. Any help is much appreciated...

推荐答案

我终于意识到我已经忘记了另一个启动程序Gatsby项目如何处理Wow.js。 ..根据他们在Gatstrap，Gatsby入门博客中的示例，这就是解决我的问题的地方：

I finally realized that I had forgotted how another starter Gatsby project handled Wow.js... This is what fixed my issue, based of their example in the Gatstrap, Gatsby starter blog:

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

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

希望这对其他人有帮助！

Hope this helps someone else!

这篇关于GatsbyJS / ReactJS& AOS（滚动动画）导致构建问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！