React回到顶部按钮显示异常求助：滚动判断生效但按钮不显示

嘿，我看了你的代码，问题出在React组件的渲染机制上——你虽然在scroll事件里计算了正确的显示条件，但没有触发组件重新渲染，所以按钮的显示状态不会跟着滚动位置实时更新！

核心问题拆解 #

React组件只有在state或props发生变化时才会重新渲染。你现在的showActionWhenPosition函数确实能在滚动时计算出正确的返回值，但这个值只是在函数内部流转，并没有告诉React「我需要更新UI」。所以渲染阶段调用showActionWhenPosition()时，用的还是组件上次渲染时的滚动位置，自然不会实时响应滚动动作。

另外，你的第二个useEffect没有设置依赖数组，这会导致每次组件渲染时都重复添加/移除scroll监听，属于不必要的性能损耗。

具体修改方案 #

我们需要用一个状态变量来跟踪按钮的显示状态，在滚动时更新这个状态，触发组件重新渲染。以下是修改后的完整代码：

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 [isShowToTop, setIsShowToTop] = useState(false)
  const toMedium = useMediaQuery({ query: TO_MEDIUM })

  const scrollAction = () => {
    const htmlElement = document.querySelector('html')
    htmlElement.scrollTo({ top: 0, behavior: 'smooth' }) // 可以加个平滑滚动体验更好
  }

  // 修改scroll事件处理逻辑：更新状态而非返回值
  const handleScroll = () => {
    const scrollPosition = window.scrollY
    setIsShowToTop(scrollPosition > windowHeight)
  }

  // 初始化+监听窗口大小变化，更新windowHeight
  useEffect(() => {
    const updateWindowHeight = () => {
      setWindowHeight(window.innerHeight / 2)
    }
    updateWindowHeight()
    window.addEventListener('resize', updateWindowHeight)
    return () => {
      window.removeEventListener('resize', updateWindowHeight)
    }
  }, [])

  // 绑定scroll监听，添加依赖数组避免重复绑定
  useEffect(() => {
    document.addEventListener('scroll', handleScroll)
    return () => {
      document.removeEventListener('scroll', handleScroll)
    }
  }, [windowHeight]) // 依赖windowHeight，确保阈值变化时监听逻辑同步更新

  return (
    <>
      {/* 用状态变量判断显示，而非直接调用函数 */}
      {(toMedium && isShowToTop) && (
        <button className="to-top" onClick={scrollAction}>
          <ArrowDown className="to-top__action-svg-arrow" />
        </button>
      )}
    </>
  )
}

export default injectIntl(TheToTop)

关键修改点说明 #

1. 新增isShowToTop状态：用状态变量存储按钮的显示状态，每次滚动时更新这个状态，React会自动触发组件重新渲染，让按钮的显示/隐藏实时响应滚动位置。
2. 重构scroll事件处理函数：把原来的showActionWhenPosition改成handleScroll，专注于更新状态，而非返回值——渲染阶段调用函数无法实时响应scroll事件，只有状态变化才能触发重新渲染。
3. 完善windowHeight的更新逻辑：添加resize事件监听，窗口大小变化时自动更新windowHeight，确保显示阈值始终是当前窗口高度的一半。
4. 修复useEffect依赖：给第二个useEffect添加[windowHeight]依赖数组，避免每次渲染都重复绑定监听，同时确保windowHeight变化时，scroll监听的判断逻辑同步更新。

内容的提问来源于stack exchange，提问作者Dejan.S