無狀態組件中的反應添加/刪除類onScroll

Question

如何在開始滾動時向組件添加類，然後在無狀態組件中停止時將其刪除。

這不是工作

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擴展狀態變化作出反應。

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方法注入，因爲您不需要event對象。

這背後的邏輯是，即使setTimeout觸發狀態變化，每次滾動組件的狀態重新設置和反應重新呈現新的狀態（scrollClass: 'Feed scrolling'）的元素和週期的推移和。