Confli c с общим пользовательским хуком React и свойством window.onscroll - PullRequest
Новая
       7

Confli c с общим пользовательским хуком React и свойством window.onscroll

0 голосов
/ 13 февраля 2020

У меня есть пользовательский хук React, который показывает / скрывает кнопку в соответствии со значениями window.pageYOffset: 

const useHandlerOnScroll = height => {

    const [buttonVisible, showUpButton] = useState(false);
    useEffect ( () => {
        window.onscroll = () => {
            window.pageYOffset >= height ? showUpButton(true) : showUpButton(false)
        }
    })  

    return { buttonVisible }
}

Когда бы мне ни понадобилось его использовать, я просто деконструирую свой хук в своем компоненте и беру кнопку buttonVisible значение: 

export default () => {

    const { buttonVisible } = useHandlerOnScroll(450)

    const goTop = () => window.scrollTo({ top: 0, behavior: 'smooth' })

    return buttonVisible 
      ? <BottoneTop onClick={() => }> <FaChevronCircleUp /> </BottoneTop> 
        : null
}

Эта процедура работает до тех пор, пока я использую ее только для одного компонента, если я экспортирую свой хук useHandlerOnScroll и использую его для другой кнопки, появится только одна кнопка.

Я не понимаю почему, так как я думал, что каждый компонент, который импортирует ловушку, создаст новый экземпляр этой ловушки.

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

PS: я предполагаю, что свойство window.oncroll вызывает некоторые конфликт при вызове таким образом (я все же предпочел бы не использовать addEventListener по соображениям производительности).

1 Ответ

0 голосов
/ 17 февраля 2020

Только что обнаружил, что метод .onscroll может быть назначен только одному объекту за раз, так что это является источником конфликта:

Одновременно только один обработчик прокрутки может быть назначен объекту. Для большей гибкости вы можете вместо этого передать событие прокрутки в метод EventTarget.addEventListener ().

from: MDN Web-документы - GlobalEventHandlers.onscroll

Я исправил свою проблему с window.addEventListener("scroll", callbackFunction ).

...