使用 CSS 样式覆盖 React 组件

Question

所以现在我有了一个 NavBar 组件。

我有这段 JavaScript 代码，可以让导航栏在达到 50px 时具有背景颜色。我如何才能将此 JavaScript 应用于仅一个文件而不是所有文件。

我的意思是我希望此滚动效果仅适用于主页而不适用于 aboutPage 或任何其他页面。

  const [sticky, setSticky] = useState(false);
  useEffect(() => {
    window.addEventListener("scroll", () => {
      window.scrollY > 50 ? setSticky(true) : setSticky(false);
    });
  }, []);


  return (
    <nav className={`container ${sticky ? "dark-nav" : ""}`}>
      <Link to="/">
        <img src={Logo} className="Logo" alt="" />
      </Link>
      <ul className={mobileMenu ? "" : "hide-mobile-menu"}>
        <li>
          <NavLink to="/">Home</NavLink>
        </li>
        <li>
          <NavLink to="/About">About</NavLink>
        </li>
        <li>
          <NavLink to="/Services">Services</NavLink>
        </li>
        <li>
          <NavLink to="/Contact">
            <btn className="btn">Contact Us</btn>
          </NavLink>
        </li>
      </ul>
      <img src={menuIcon} alt="" className="menu-icon" onClick={toggleMenu} />
    </nav>
  );

Answer 1

您可以在应用滚动事件监听器之前添加一个检查来测试当前页面 URL。使用

window.location.pathname

获取不带域的路径。

useEffect(() => {
    const path = window.location.pathname.trim();
    if (path === "" || path === "/") { // allow for trailing slash
        window.addEventListener("scroll", () => {
             window.scrollY > 50 ? setSticky(true) : setSticky(false);
        });
    }
}, []);