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

【问题标题】：How to add class in element on scroll React js如何在滚动React js的元素中添加类
【发布时间】：2017-10-27 13:11:48
【问题描述】：

如何在滚动 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>
    )
  },

})

【问题讨论】：

标签： reactjs

【解决方案1】：

如果浏览器处理不当，还有一个带有钩子和清理的变体以避免内存泄漏。

const [isScrollValueMoreThanHeaderHeight, setIsScrollValueMoreThanHeaderHeight] = useState(false);

//here 96(px) - height of current header

useEffect(() => {
    const handleScroll = () => {
        setIsScrollValueMoreThanHeaderHeight(window.scrollY > 96);
    }
    window.addEventListener('scroll', handleScroll)
    return () => window.removeEventListener('scroll', handleScroll);
},[])

然后以三元方式使用它来改变类

className={isScrollValueMoreThanHeaderHeight ? "class1" : "class2"}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

})

【讨论】：

@harry 不要忘记在 componentWillUnmount 中删除EventListener！ componentWillUnmount() { window.removeEventListener('scroll'); }