时间戳

首页 > 解决方案 > 如何在反应组件中添加和删除类名？

javascript - 如何在反应组件中添加和删除类名？

问题描述

我想使用 React 钩子来实现这样的东西：

const header = document.querySelector(".nav-header");

function stickyHeader() {
  if (window.pageYOffset > 600) {
    header.classList.remove("header");
  } else {
    header.classList.add("header");
  }
}

window.addEventListener("scroll", () => {
  stickyHeader();
});

以上是我在 vanilla js 中操作 DOM 的方式。我想对 react 中的组件做同样的事情。

标签： javascriptreactjsdom

解决方案

可能尝试一个 getClassName 方法，该方法在每次渲染时返回一个连接的类数组

对于功能组件

const getClassName = () => {
  let classes = ["nav"];

  if (window.pageYOffset > 600) {
   classes.push("header");
  } 
  //more conditions if required

  return classes.join(" ");
  //returns "nav header" || "nav"

}

然后在你的组件返回方法中

return (
 <div className={getClassName()}><div>
)

推荐阅读