Reactjs 在无状态组件中添加/删除类onScroll

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

这不管用

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

从“React”导入React
让scrollClass='Feed'；
函数handleScroll（e）{
scrollClass='Feed scrolling'；
}
导出默认函数提要（）{
返回(
handleScroll（e）}>
洛雷姆·伊普苏姆·多洛尔·西特（Lorem ipsum dolor sit amet）是一位杰出的艺术家，也是一位杰出的艺术家。
)
}

对于要对您应该使用的状态更改做出反应的组件，可以从

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

从“React”导入React
导出默认类提要扩展React.component{
建造师（道具）{
超级（道具）
this.state={scrollClass:'Feed'}
}
handleScroll（东）{
this.setState（{scrollClass:'Feed scrolling'}）
setTimeout（（）=>{this.setState（{scrollCLass:'Feed'}）}，100）
}
render（）{
设{scrollClass}=this.state
返回
洛雷姆·伊普苏姆·多洛尔·西特（Lorem ipsum dolor sit amet）是一位杰出的艺术家，也是一位杰出的艺术家。
}
}

这是说明性的，我没有运行此代码。注意，我删除了

周围的括号，并通过删除不必要的箭头函数简化了

onScroll

方法注入，因为您不需要

事件

对象

---

这背后的逻辑是，即使

setTimeout

触发了状态更改，每次滚动组件的状态时，都会再次设置，并使用新状态重新呈现元素（

scrollClass:'Feed scrolling'

）这个循环会一直持续下去。

如果你想让你的组件保持无状态，你应该有一个非无状态的父组件，并从无状态组件（child->parent）向它发送一个事件，父类组件应该改变状态并重新呈现无状态的子组件