Как добавить и удалить classNames в компоненте реакции?

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

Выше, как я мог бы манипулировать DOM в vanilla js. Я хотел бы сделать то же самое для компонента в React.

Answer 1

Возможно, попробуйте метод 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>
)

Answer 2

className - атрибут элемента. Поэтому вам нужно установить его в своей функции render компонента, как показано ниже:

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

здесь - это пример того, как обрабатывать события прокрутки с помощью React