Я борюсь с застреванием параллакса прокрутки, когда начальная прокрутка страницы не находится наверху при загрузке. Я использую библиотеку response-scroll-parallax ( https://www.npmjs.com/package/react-scroll-parallax ). Чтобы решить мою проблему, я пытаюсь использовать их предложение здесь https://www.npmjs.com/package/react-scroll-parallax#example-usage-of-context .

import { useEffect } from 'react'; import { useController } from 'react-scroll-parallax'; const ParallaxCache = () ={amp}gt; { const { parallaxController } = useController(); useEffect(() ={amp}gt; { const handler = () ={amp}gt; { parallaxController.update(); console.log(1); }; window.addEventListener('load', handler); return () ={amp}gt; document.removeEventListener('load', handler); }, [parallaxController]); return null; }; export default ParallaxCache; 

Я поместил компонент ParallaxCache поверх моего приложения (на самом деле, страница вызывает его gatsby).

Но событие load, похоже, не работает. Я также пробовал ‘DOMContentLoaded’, но с тем же результатом. Однако другое событие, например, «прокрутка» или «изменение размера», работает правильно, и мой контроллер обновляется. Я что-то упускаю или реагирую мешает использовать эти события?

Весьма вероятно, что ваше окно уже запустило событие загрузки, когда ваш компонент был истощен.

Если это просто событие load которое не работает, возможно, страница уже загружена во время выполнения этого кода. Попробуйте добавить оператор if, чтобы проверить, загружен ли уже документ.

 import { useEffect } from 'react'; import { useController } from 'react-scroll-parallax'; const ParallaxCache = () ={amp}gt; { const { parallaxController } = useController(); useEffect(() ={amp}gt; { const handler = () ={amp}gt; { parallaxController.update(); console.log(1); }; if (document.readyState === "complete") { handler(); } else { window.addEventListener('load', handler); return () ={amp}gt; document.removeEventListener('load', handler); } }, [parallaxController]); return null; }; export default ParallaxCache; 

Хук useEffect не подходит в этой ситуации, поэтому вы должны использовать хук useLayoutEffect. Пожалуйста, проверьте эту ссылку. https://www.npmjs.com/package/react-scroll-parallax#example-usage-of-context Вы использовали ловушку useEffect Но в этом примере они использовали ловушку useLayoutEffect. Пожалуйста, обратитесь к этой ссылке. https://kentcdodds.com/blog/useeffect-vs-uselayouteffect

 const ParallaxCache = () ={amp}gt; { const { parallaxController } = useController(); useLayoutEffect(() ={amp}gt; { const handler = () ={amp}gt; parallaxController.update(); window.addEventListener('load', handler); return () ={amp}gt; window.removeEventListener('load', handler); }, [parallaxController]); return null; }; 

Я думаю, что вы должны использовать один из методов жизненного цикла, если вы используете компонент на основе классов, такой как componentDidMount метод.

 componentDidMount() { window.addEventListener('resize', this.handleResize) }