reactjs - 如何在滚动React js的元素中添加类

Question

如何在滚动React js的元素中添加类，我想在滚动上添加类并在页面顶部删除该类。

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>
    )
  },

})

Answer 1

如果你想在2020年无状态组件中使用React Hooks

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

并在代码中的任何位置使用它

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

setScroll(window.scrollY > 50);这里50指定高度。