Условное имя класса не обновляется при обновлении логического значения

Question

Я знаю, это должно быть просто глупо. Все примеры, которые я могу найти здесь, просто глупы. Но по некоторым причинам я не могу заставить className измениться в моем компоненте.

Я пытаюсь оживить сайт lo go, когда пользователь прокручивает страницу вниз. fullLogo меняется в соответствии с ожиданиями в соответствии с журналами. Но класс никогда не меняется. Единственное, о чем я могу думать, это то, что как только рендеринг произойдет, это все, и он должен быть объявлен как класс для повторного рендеринга таким образом. Это проблема?

  const headerHeight = 89
  let fullLogo = true

  window.addEventListener('scroll', (e) => {
    if (window.pageYOffset > headerHeight) {
      console.log('scrolled beyond header height')
      fullLogo = false;
    } else {
      fullLogo = true;
    }
    console.log('fullLogo', fullLogo)
  })

<header className={(!!fullLogo ? 'full-logo' : '')}>

Вот полный компонент, если это поможет:

import React, { useState } from "react"
import PropTypes from "prop-types"
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink
} from 'reactstrap'

import "./header.scss"

const Header = ({ siteTitle, menu, location }) => {

  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(!isOpen);

  const headerHeight = 89
  let fullLogo = true

  window.addEventListener('scroll', (e) => {
    if (window.pageYOffset > headerHeight) {
      console.log('scrolled beyond header height')
      fullLogo = false;
    } else {
      fullLogo = true;
    }
    console.log('fullLogo', fullLogo)
  })

  menu.forEach((item, index) => {
    if (item.path === location.pathname) {
      item.active = true
    } else {
      item.active = false
    }
  })

  return (
    <header className={(!!fullLogo ? 'full-logo' : '')}>
      <Navbar color="light" light expand="md" fixed="top">
        <NavbarBrand href="/">
          <span className="initial">L</span>
          <span className="rest">OGO</span>
          <span className="splitter"></span>
          <span className="initial">N</span>
          <span className="rest">AME</span>
        </NavbarBrand>
        <NavbarToggler onClick={toggle} />
        <Collapse isOpen={isOpen} navbar>
          <Nav className="mr-auto" navbar>
            {menu.map((item, index) => (
              <NavItem key={`nav_link_${index}`}>
                <NavLink href={item.path} className={item.active ? `active` : null}>{item.title}</NavLink>
              </NavItem>
            ))}
          </Nav>
        </Collapse>
      </Navbar>
    </header>
  )
}

Header.propTypes = {
  siteTitle: PropTypes.string,
  menu: PropTypes.array
}

Header.defaultProps = {
  siteTitle: ``,
  menu: {
    title: `Home`,
    path: `/`
  }
}

export default Header

Answer 1

Код с помощью хуков будет похож на

import React, { useState } from "react"
import PropTypes from "prop-types"
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink
} from 'reactstrap'

import "./header.scss"

const Header = ({ siteTitle, menu, location }) => {

  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(!isOpen);

  const headerHeight = 89
  const [fullLogo,setFullLogo] = useState(true)

  window.addEventListener('scroll', (e) => {
    if (window.pageYOffset > headerHeight) {
      console.log('scrolled beyond header height')
      setFullLogo(false);
    } else {
      setFullLogo(true);
    }
    console.log('fullLogo', fullLogo)
  })

  menu.forEach((item, index) => {
    if (item.path === location.pathname) {
      item.active = true
    } else {
      item.active = false
    }
  })

  return (
    <header className={(!fullLogo ? 'full-logo' : '')}> //If You Want to toggle current state
      <Navbar color="light" light expand="md" fixed="top">
        <NavbarBrand href="/">
          <span className="initial">L</span>
          <span className="rest">OGO</span>
          <span className="splitter"></span>
          <span className="initial">N</span>
          <span className="rest">AME</span>
        </NavbarBrand>
        <NavbarToggler onClick={toggle} />
        <Collapse isOpen={isOpen} navbar>
          <Nav className="mr-auto" navbar>
            {menu.map((item, index) => (
              <NavItem key={`nav_link_${index}`}>
                <NavLink href={item.path} className={item.active ? `active` : null}>{item.title}</NavLink>
              </NavItem>
            ))}
          </Nav>
        </Collapse>
      </Navbar>
    </header>
  )
}

Header.propTypes = {
  siteTitle: PropTypes.string,
  menu: PropTypes.array
}

Header.defaultProps = {
  siteTitle: ``,
  menu: {
    title: `Home`,
    path: `/`
  }
}

export default Header

Answer 2

Ваше предположение верно. Нет события жизненного цикла, которое вызывает повторную визуализацию. Функциональные компоненты обновляются только в случае смены реквизита или использования хуков. Здесь вы можете использовать ловушку для setDisplayFullLo go.