javascript - 如何将类添加到被调用的组件？

Question

我不知道如何将一个类添加到我从另一个页面调用的标题组件中。我想知道如何添加更改类，在这里看起来如何

const [change, setChange] = useState("change");

const listenScrollEvent = (e) => {
  if (window.scrollY < 400) {
    return setChange("change");
  } else if (window.scrollY > 400) {
    return setChange("changeColor");
  }
};

useEffect(() => {
  window.addEventListener("scroll", listenScrollEvent);

  return () => {
    window.removeEventListener("scroll", listenScrollEvent);
  };
}, []);

return <Header className={change} />;

标头代码：

export default function Header() {
  return (
    <header className="container header">
      <Logo />
      <Navbar />
    </header>
  );
}

标签： javascriptreactjs

Answer 1

您需要接受className作为Header组件的道具。

像这样的东西：

export default function Header({ className }) {
    return (
        <header className={`container header ${className}`}>
            <Logo />
            <Navbar />
        </header>
    )
}