Reactjs 我的状态会更改，但在使用效果、滚动时不会添加类

当页面下降320 px时，我需要更改JSX元素的背景，所有这些都带有useEffect和useState。到目前为止，我设法改变了状态，但没有添加另一种颜色的背景类

我正在使用Node8.9.3、NPM5.5.1和REACT JS 16.9.0

import React，{useffect，useState}来自“React”
从“反应使用滚动位置”导入{UseCollyPosition}
从“../../styles/Container”导入{Container}
从“./styles”导入{ContainerCustom，HeaderComp}
从“./Logo”导入徽标
从“./菜单”导入菜单
从“./Icons”导入图标
const ContainerBox=（）=>{
返回(
)
}
常量头=（）=>{
常量[后退，后退]=使用状态（0）
const handleBackState=（）=>{
const scrollY=window.scrollY
如果（滚动>320）{
挫折（1）
log（`Estado:${back}`）
}否则{
倒退（0）
log（`Estado após remover:${back}`）
}
}
useffect（（）=>{
window.addEventListener（'scroll'，handleBackState）
return（）=>{
window.removeEventListener（'scroll'，handleBackState）
}
}，[handleBackState]）
返回
}

控制台上的输出状态为：0，320后的状态为：删除后的状态： 一,

---

并非每个组件在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>
);

//类名不会影响DOM，因为此组件不会呈现DOM元素
常量包装组件=（{className}）=>(
);
//此类名将应用于DOM中的div
常量WrappedComponent=（{className}）=>(
满足于此
);

您提供了

scrollY

作为对

useffect

的依赖项，但这仅在处理程序中定义，不在您调用的

useffect

范围内。那代码还能用吗？正确的依赖关系应该是

handleBackState

，它应该包装在

useCallback

中。你甚至可以内联它，让

useffect

完全没有依赖关系。。。继续工作状态，但不更新类。您是否知道，除非省略某些代码，否则该范围中未定义

scrollY

？您不能在那里使用它，因为它只在处理程序内部定义。正确的依赖关系应该是

handleBackState

（如果有的话）。但是，您可以将处理程序内联到

useffect

中。Is

ContainerBox

甚至接受

className

属性并将其转发到DOM元素？非常感谢。我可以换课了。。这个错误正是我所评论的。。。ContainerBox不是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>
);