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

Question

I would like to implement something like this using React hooks:

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();
});

Above, is how I would have manipulated the DOM in vanilla js. I would like to do the same for a component in react.

Answer 1

className is an element attribute. Therefore you need to set it in your render component function like below:

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

here is an example on how to handle scroll events with React

Answer 2

Possibly try a getClassName method which returns a joined array of classes on every render

For a functional component

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

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

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

}

and then in your component return method

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