React 导入的组件没有完全工作

Question

我真的是 React 的新手，我已经尝试了一段时间来滚动到顶部 function。 使用现有的教程和谷歌上的所有内容，我制作了这个组件：

Import React, { useState, useEffect } from "react";


export default function ScrollToTop() {
const [isVisible, setIsVisible] = useState(false)

const toggleVisibility = () => {
    if(window.pageYOffset > 300) {
        setIsVisible(true);
    } else {
        setIsVisible(false);
    }
};

const ScrollToTop = () => {
    window.scrollTo({
        top: 0,
        behavior: "smooth",
    });
};

useEffect(() => {
    window.addEventListener('scroll', toggleVisibility);

    return () => {
        window.removeEventListener('scroll', toggleVisibility);
    };
}, []);

if (!isVisible) {
    return false
}

return (
<button className="button" onClick={ScrollToTop}>
    <div className="button__arrow button__arrow--up"></div>
</button>
)
};

问题是当我在 App.js 中导入它时它不能正常工作，滚动部分工作得很好，但它只是停留在页面底部而不是在一定量的滚动后出现。 这是 App.js：

return (
<div>
  {loading ? (
    <h1>Loading...</h1>
  ) : (
    <>
    <Navbar />
      <div className="Grid-container">
        {pokemonData.map((pokemon, i) => {
          return <Card key={i} pokemon={pokemon} />;
        })}
      </div>
    <ScrollToTop/>
    </>
  )}
</div>
);
}

Answer 1

我在您的ScrollTop实现中没有看到任何明显的问题，即使在滚动回顶部后，滚动到顶部按钮也会保留在页面上，但我确实看到了优化的空间。

1. 对于onScroll事件，最好使用被动侦听器。
2. 在安装useEffect时立即调用toggleVisibility以确保正确的初始 state。
3. 将 Boolean Zen 应用于可见性切换器； 使用 boolean 比较的结果更新isVisible state。
4. 只需有条件地在一次返回中呈现按钮。

代码：

function ScrollToTop() {
  const [isVisible, setIsVisible] = useState(false);

  const toggleVisibility = () => {
    setIsVisible(window.pageYOffset > 300);
  };

  const ScrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  };

  useEffect(() => {
    toggleVisibility();

    window.addEventListener("scroll", toggleVisibility, { passive: true });

    return () => {
      window.removeEventListener("scroll", toggleVisibility, { passive: true });
    };
  }, []);

  return isVisible ? (
    <button className="button" onClick={ScrollToTop}>
      <div className="button__arrow button__arrow--up">TOP</div>
    </button>
  ) : null;
}

如果您的实施和使用仍然存在问题，请尝试创建一个代码框来重现我们可以实时检查和调试的问题。