Reactjs 如何在scroll上的元素中添加类

如何在scroll React js的元素中添加类，我想在scroll中添加类，如果在页面顶部，则删除该类

import React from "react"
import { Link } from "react-router"
import { prefixLink } from "gatsby-helpers"
import Helmet from "react-helmet"
import { config } from "config"

module.exports = React.createClass({
  propTypes() {
    return {
      children: React.PropTypes.any,
    }
  },
  render() {
  window.addEventListener('scroll', (event) => {

    });
    return (
      <div>
        <header className="header">
          <div className="top-bar">
            <span><a href="tel:6788272782">678-827-2782 </a></span>
            <span><a href="mailto:hellohello@knotel.com"> hellohello@knotel.com</a></span>
            <button>Login</button>
          </div>
        </header>
        {this.props.children}
      </div>
    )
  },

})

从“React”导入React
从“反应路由器”导入{Link}
从“盖茨比助手”导入{prefixLink}
从“反应头盔”导入头盔
从“配置”导入{config}
module.exports=React.createClass({
propTypes（）{
返回{
儿童：React.PropTypes.any，
}
},
render（）{
window.addEventListener（'滚动'，（事件）=>{
});
返回(
登录
{this.props.children}
)
},
})

在滚动事件中使用状态管理类名和更新状态。此外，您应该将滚动事件绑定移动到componentDidMount函数中，而不是render

import React from "react"
import { Link } from "react-router"
import { prefixLink } from "gatsby-helpers"
import Helmet from "react-helmet"
import { config } from "config"

module.exports = React.createClass({
  propTypes() {
    return {
      children: React.PropTypes.any,
    }
  },
  componentDidMount(){
      window.addEventListener('scroll', () => {
         let activeClass = 'normal';
         if(window.scrollY === 0){
             activeClass = 'top';
         }
         this.setState({ activeClass });
      });
  }
  render() {
    return (
      <div>
        <header className="header">
          <div className={`top-bar ${this.state.activeClass}`}>
            <span><a href="tel:6788272782">678-827-2782 </a></span>
            <span><a href="mailto:hellohello@knotel.com"> hellohello@knotel.com</a></span>
            <button>Login</button>
          </div>
        </header>
        {this.props.children}
      </div>
    )
  },

})

从“React”导入React
从“反应路由器”导入{Link}
从“盖茨比助手”导入{prefixLink}
从“反应头盔”导入头盔
从“配置”导入{config}
module.exports=React.createClass({
propTypes（）{
返回{
儿童：React.PropTypes.any，
}
},
componentDidMount（）{
window.addEventListener（'scroll'，（）=>{
让activeClass='normal'；
如果（window.scrollY==0）{
activeClass='top'；
}
this.setState（{activeClass}）；
});
}
render（）{
返回(
登录
{this.props.children}
)
},
})

如果您想在2020无状态组件中使用React钩子

const [scroll, setScroll] = useState(false);
 useEffect(() => {
   window.addEventListener("scroll", () => {
     setScroll(window.scrollY > 50);
   });
 }, []);

并在代码中的任何地方使用它

className={scroll ? "bg-black" : "bg-white"}

设置滚动（窗口滚动>50）；此处50指定高度。

import React，{useState，useffect}来自“React”
import React, { useState, useEffect } from "react"
import { Link } from "react-router"
import { prefixLink } from "gatsby-helpers"
import Helmet from "react-helmet"
import { config } from "config"

export default function Header(props) {
  const [scroll, setScroll] = useState(false)
  useEffect(() => {
    window.addEventListener("scroll", () => {
      setScroll(window.scrollY > 10)
    })
  }, [])
  return (
    <header className={scroll ? "main-header scrolled" : "main-header"}>
</header>
  )
}

从“反应路由器”导入{Link}
从“盖茨比助手”导入{prefixLink}
从“反应头盔”导入头盔
从“配置”导入{config}
导出默认函数标题（道具）{
常量[scroll，setScroll]=useState（false）
useffect（（）=>{
window.addEventListener（“滚动”，（）=>{
设置滚动（窗口滚动>10）
})
}, [])
返回(
)
}

@harry别忘了在componentWillUnmount中删除VentListener！componentWillUnmount（）{window.removeEventListener（'scroll'）；}