React add/remove class 无状态组件中的 onScroll

Question

如何在开始滚动时将 class 添加到组件，然后在无状态组件中停止滚动时将其删除。

这不起作用

import React from 'react'

let scrollClass = 'Feed';

function handleScroll(e) {
  scrollClass = 'Feed scrolling';
}

export default function Feed(){

  return (
    <div className={scrollClass} onScroll={(e) => handleScroll(e)}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu leo. 
    </div>
  )
}

Answer 1

为了让组件对状态变化做出反应，您应该使用 the component's state 并从 React.component 基类扩展。此外，由于没有 onStopScroll 这样的事件，因此您可以在 onScroll 事件发生时设置一个计时器：

import React from 'react'


export default class Feed extends React.component {
  constructor(props) {
    super(props)
    this.state = { scrollClass: 'Feed' }
  }

  handleScroll(e) {
    this.setState({ scrollClass: 'Feed scrolling' })
    setTimeout(() => { this.setState({ scrollCLass: 'Feed' }) }, 100)
  }

  render() {
    let { scrollClass } = this.state

    return <div className={ scrollClass } onScroll={ this.handleScroll }>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu leo. 
    </div>
  }
}

这是说明性的，我没有运行这段代码。请注意，我删除了 <div> 周围的括号并通过删除不必要的箭头函数简化了 onScroll 方法注入，因为您不需要 event 对象。

这背后的逻辑是，即使 setTimeout 触发了状态更改，每次滚动时组件的状态都会重新设置，并且反应会重新渲染具有新状态的元素（scrollClass: 'Feed scrolling') 循环不断。

Answer 2

如果你想让你的组件保持无状态，你应该有一个非无状态的父组件，并从无状态组件（子->父）向它发送一个事件，父 class 组件应该改变状态re-render 无状态子组件。

React add/remove class 无状态组件中的 onScroll

React add/remove class onScroll in Stateless component

scroll

addclass

removeclass

reactjs