布尔更新时条件类名未更新答案

【问题标题】：Conditional className not updated when boolean updated布尔更新时条件类名未更新
【发布时间】：2020-05-26 07:57:52
【问题描述】：

我知道这应该是愚蠢的简单。我可以在这里找到的所有示例都非常简单。但是由于某种原因，我无法在我的组件中让 className 有条件地更改。

我正在尝试在用户向下滚动时为网站徽标设置动画。 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

【问题讨论】：

尝试使用 fullLogo 作为状态 by useState() hooks !!fullLogo 使用这与 fullLogo 没有任何区别，您可以尝试改用 !fullLogo

标签： reactjs gatsby

【解决方案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

【讨论】：

【解决方案2】：

你的假设是正确的。没有触发重新渲染的生命周期事件。仅当您更改道具或使用挂钩时，功能组件才会更新。在这里你可以使用一个钩子来设置DisplayFullLogo。

【讨论】：