Показать элемент, когда позиция на прокрутке хитов

Question

Я пытаюсь сделать кнопку прокрутки вверх. Я сделал прокрутку к верхней части, но я борюсь с показом. Что мне здесь не хватает?

showActionWhenPosition возвращает правильное значение, но мое "шоу" не работает. Вот что я получил.

import React, { useEffect, useState } from 'react'
import ArrowDown from "components/svg/ArrowDown"
import { injectIntl } from "react-intl"
import { useMediaQuery } from 'react-responsive'
import { TO_MEDIUM } from 'core/ui/breakpoints'

const TheToTop = ({ intl }) => {
  const [windowHeight, setWindowHeight] = useState(0)

  const toMedium = useMediaQuery({
    query: TO_MEDIUM
  })

  const scrollAction = () => {
    const htmlElement = document.querySelector('html')

    htmlElement.scrollTo({
      top: 0
    })
  }

  const showActionWhenPosition = () => {
    const scrollPosition = window.scrollY
    console.log(scrollPosition)

    if (scrollPosition > windowHeight) {
      console.log('yes')
    } else {
      console.log('no')
    }

    return scrollPosition > windowHeight
  }

  useEffect(() => {
    setWindowHeight(window.innerHeight / 2)
  }, [])

  useEffect(() => {
    document.addEventListener('scroll', showActionWhenPosition)

    return () => {
      document.removeEventListener('scroll', showActionWhenPosition)
    }
  })

  return (
    <React.Fragment>
      {(toMedium && showActionWhenPosition()) && <button className="to-top" onClick={() => scrollAction()}>
        <ArrowDown className="to-top__action-svg-arrow" />
      </button>}
    </React.Fragment>
  )
}

export default injectIntl(TheToTop)

Answer 1

Вы должны использовать состояние. Например

import React, { useEffect, useState } from 'react'
import ArrowDown from "components/svg/ArrowDown"
import { injectIntl } from "react-intl"
import { useMediaQuery } from 'react-responsive'
import { TO_MEDIUM } from 'core/ui/breakpoints'

const TheToTop = ({ intl }) => {
  const [windowHeight, setWindowHeight] = useState(0)
  const [shouldShow, setShouldShow] = useState(false)

  const toMedium = useMediaQuery({
    query: TO_MEDIUM
  })

  const scrollAction = () => {
    const htmlElement = document.querySelector('html')

    htmlElement.scrollTo({
      top: 0
    })
  }

  const showActionWhenPosition = () => {
    const scrollPosition = window.scrollY
    console.log(scrollPosition)

    if (scrollPosition > windowHeight) {
      setShouldShow(true)
    } else {
      setShouldShow(false)
    }
  }

  useEffect(() => {
    setWindowHeight(window.innerHeight / 2)
  }, [])

  useEffect(() => {
    document.addEventListener('scroll', showActionWhenPosition)

    return () => {
      document.removeEventListener('scroll', showActionWhenPosition)
    }
  })

  return (
    <React.Fragment>
      {(toMedium && shouldShow ) && <button className="to-top" onClick={() => scrollAction()}>
        <ArrowDown className="to-top__action-svg-arrow" />
      </button>}
    </React.Fragment>
  )
}

export default injectIntl(TheToTop)

Причина, по которой он не работает, потому что страница не рендерится