如何在反應組件中添加和刪除類名？

Question

我想使用 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 中的組件做同樣的事情。

Answer 1

className是一個元素屬性。 因此，您需要在render組件 function 中設置它，如下所示：

...
render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menu</span>
}

這是一個關於如何使用 React 處理滾動事件的示例

Answer 2

可能嘗試一個 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>
)