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

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

var tentativa = "{ id:'" +  result.rows[i][0] + "', timestamp:'" + result.rows[i][1]+"', application: '"+ applicationName +
              "', type:'Log', source: '" + result.rows[i][2] + "', " + string+ " }";

            request({
              uri: "http://localhost:5000/logs",
              method: "POST",
              form:   tentativa,
              headers: { 'Content-Type' : 'application/x-www-form-urlencoded' }
              }, function(error, response, body) {
                console.log(body);

            });

Answer 2

如果您想在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指定高度。

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

3 个答案: