Мое состояние изменяется, но не добавляет класс при использовании эффекта, когда я прокручиваю - PullRequest
Новая
       0

Мое состояние изменяется, но не добавляет класс при использовании эффекта, когда я прокручиваю

1 голос
/ 25 сентября 2019

Мне нужно изменить фон элемента JSX, когда страница уменьшается на 320 пикселей, все с помощью useEffect и useState.Пока мне удалось изменить состояние, но не добавляет класс фона другого цвета.

Я использую NODE 8.9.3, NPM 5.5.1 и REACT JS 16.9.0 

import React, { useEffect, useState } from 'react'

import { useScrollYPosition } from 'react-use-scroll-position'

import { Container } from '../../styles/Container'
import { ContainerCustom, HeaderComp } from './styles'

import Logo from './Logo'
import Menu from './Menu'
import Icons from './Icons'

const ContainerBox = () => {
  return (
    <ContainerCustom fluid>
      <Container>
        <HeaderComp>
          <Logo />
          <Menu />
          <Icons />
        </HeaderComp>
      </Container>
    </ContainerCustom>
  )
}

const Header = () => {
  const [back, setBack] = useState(0)

  const handleBackState = () => {
    const scrollY = window.scrollY
    if (scrollY > 320) {
      setBack(1)
      console.log(`Estado: ${back}`)
    } else {
      setBack(0)
      console.log(`Estado após remover: ${back}`)
    }
  }

  useEffect(() => {
    window.addEventListener('scroll', handleBackState)
    return () => {
      window.removeEventListener('scroll', handleBackState)
    }
  }, [handleBackState])
  return <ContainerBox className={back === 1 ? 'removeGradients' : ''} />
}

На консоли выводится состояние: 0, а после 320, состояние после удаления: 1

1 Ответ

1 голос
/ 25 сентября 2019

Не каждый компонент также имеет представление в DOM.Вам нужно применить className к компоненту, который на самом деле имеет соответствующий элемент DOM, чтобы ваши стили имели какой-либо эффект: 

// className will not affect the DOM as this component does not render a DOM element
const WrappingComponent = ({className}) => (
    <WrappedComponent className={className} />
);

// this className will be applied to the div in the DOM
const WrappedComponent = ({className}) => (
    <div className={className}>Content here</div>
);
...