如何为被调用的Header组件添加动态类名？

嘿，问题出在你的Header组件没有接收并使用父组件传递的className props！你在父组件里把className={change}传给了Header，但Header组件根本没处理这个属性，所以动态类名自然不会生效。

下面是具体的解决步骤：

1. 修改Header组件，接收并应用className props #

你需要让Header组件接受外部传入的className，然后把它和自身原有的类名合并到<header>元素上：

export default function Header({ className }) {
  // 用模板字符串合并原有类名和传入的动态类名
  return (
    <header className={`container header ${className}`}>
      <Logo />
      <Navbar />
    </header>
  );
}

如果担心className为空时会多出空格，也可以用clsx库（一个专门处理类名的轻量工具）来优化，让类名拼接更严谨：

import clsx from 'clsx';

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

2. 父组件逻辑保持不变 #

你父组件里的滚动监听、状态切换逻辑都是没问题的，继续保持原来的代码就好：

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

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

return <Header className={change} />;

这样一来，当页面滚动时，父组件的change状态会切换，对应的类名就会传递给Header组件，并合并到<header>元素的类名里，实现你想要的滚动切换样式效果啦！

内容的提问来源于stack exchange，提问作者fanjiooJr