ステートレスコンポーネントでonScrollクラスを追加/削除する

Question

コンポーネントがスクロールを開始するときにクラスを追加する方法、ステートレスコンポーネントでコンポーネントを停止するときにクラスを削除する方法。

これはthe component's stateを使用しなければならない状態の変化に反応するとReact.component基底クラスから延びるそうするコンポーネントについて

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

が機能していません。これは例示であり

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

、私はこのコードを実行されませんでした：onStopScrollというようなイベントが存在しないようonScrollイベントが発生した場合も、あなたはタイマーを設定することができます。 オブジェクトを必要としないので、<div>の周りの括弧を削除し、不要な矢印関数を削除してonScrollメソッドの注入を簡略化したことに注目してください。

setTimeoutが状態変更をトリガする場合でも、スクロールするたびにコンポーネントの状態が再び設定され、反応して新しい状態（scrollClass: 'Feed scrolling'）の要素が再描画され、サイクルが繰り返し実行されるというロジックです。