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

Я использую узел 8.9.3, NPM 5.5.1 и реагирует на 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

2
Guilherme Moreira 25 Сен 2019 в 16:06

1 ответ

Лучший ответ

Не каждый компонент также имеет представление в доме. Вам необходимо применить 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>
);
1
trixn 25 Сен 2019 в 15:24