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

时间:2016-08-13 02:56:57

标签: reactjs scroll addclass removeclass

如何在开始滚动时向组件添加类,然后在无状态组件中将其删除时将其删除。

这不起作用

selector: 'myitem',

2 个答案:

答案 0 :(得分:2)

要使组件对状态更改做出反应,您应该使用the component's state并从$ rconsole 基类扩展。此外,由于没有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)并且循环继续。

答案 1 :(得分:0)

如果你想保持你的组件无状态,你应该有一个不是无状态的父组件,并从无状态组件(child-&gt; parent)发送一个事件,父类组件应该改变状态并重新呈现无国籍儿童组成部分。