盖茨比-IntersectionObserver未定义 [英] Gatsby - IntersectionObserver is not defined

问题描述

我正在尝试构建我的gatsby项目，但由于无法识别IntersectionObserver而无法执行.我在InView组件中使用了sectionObserver:

I am trying to build my gatsby project but I am unable due to the IntersectionObserver not being recognised. I use the intersectionObserver inside an InView component:

import React, { useRef, useState, useEffect } from 'react'


const InView = ({ children }) => {
    const [boundingClientY, setBoundingClientY] = useState(null)
    const [direction, setDirection] = useState(null)
    const [element, setElement] = useState(null)
    const [inView, setInView] = useState(false)



    const observer = useRef(new IntersectionObserver((entries) => {
        const first = entries[0]
        const { boundingClientRect } = first
        first.isIntersecting && setInView(true)
        !first.isIntersecting && setInView(false)
        boundingClientRect.y > boundingClientY && setDirection('down')
        boundingClientRect.y < boundingClientY && setDirection('up')
        boundingClientY && setBoundingClientY(first.boundingClientRect.y)

    }))


    useEffect(() => {
        const currentElement = element
        const currentObserver = observer.current
        currentElement && currentObserver.observe(currentElement)
        // console.log(currentObserver)
        return () => {
            currentElement && currentObserver.unobserve(currentElement)
        };
    }, [element])

    const styles = {
        opacity: inView ? 1 : 0,
        transform: `
            translateY(${!inView ?
                direction === 'up' ? '-20px' : '20px'
                : 0})
            rotateY(${!inView ? '35deg' : 0})
            scale(${inView ? 1 : 0.9})
            `,
        transition: 'all 0.4s ease-out 0.2s'
    }

    return (
        <div ref={setElement} style={styles}>

            {children}

        </div>
    )
}

export default InView

我为根元素提供了一个包装器以启用全局状态，并尝试将polyfill导入gatsby-browser.js中:

I have a wrapper for the root element to enable a global state and have tried importing the polyfill inside gatsby-browser.js:

import React from 'react'
import GlobalContextProvider from './src/components/context/globalContextProvider'

export const wrapRootElement = ({ element }) => {
    return (
        <GlobalContextProvider>
            {element}
        </GlobalContextProvider>
    )
}

export const onClientEntry = async () => {
    if (typeof IntersectionObserver === `undefined`) {
        await import(`intersection-observer`);
    }
}

推荐答案

这是构建错误，对吗($ gatsby构建)?如果是这种情况，则与浏览器支持无关.

This is an error on build, right ($ gatsby build)? If that's the case this has nothing to do with browser support.

这是IntersectionObserver是浏览器API的事实，并且您不应在服务器端渲染期间使用浏览器API.相反，您尝试在组件安装后利用它们.为解决此问题，请在useEffect()中而不是在当前的useRef()中初始化观察者.

It is the fact that IntersectionObserver is a browser API and you should not use browser APIs during server side rendering. Instead you try to utilize them after components have mounted. To solve this initialize your observer in useEffect() instead of useRef() as you currently do.

...
const observer = useRef();

useEffect(() => {
  observer.current = new IntersectionObserver({ ... });
}, []); // do this only once, on mount
...

这篇关于盖茨比-IntersectionObserver未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！