相关疑难解决方法(0)

我在React中构建了一个组件,它应该在窗口滚动上更新自己的样式以创建视差效果.

组件render方法如下所示:

  function() {
    let style = { transform: 'translateY(0px)' };

    window.addEventListener('scroll', (event) => {
      let scrollTop = event.srcElement.body.scrollTop,
          itemTranslate = Math.min(0, scrollTop/3 - 60);

      style.transform = 'translateY(' + itemTranslate + 'px)');
    });

    return (
      <div style={style}></div>
    );
  }

这不起作用,因为React不知道组件已更改,因此组件不会被重新呈现.

我已经尝试将值存储在itemTranslate组件的状态中,并调用setState滚动回调.但是,这使得滚动无法使用,因为这非常慢.

有关如何做到这一点的任何建议？

谢谢.

我正在尝试将onscroll事件处理程序添加到特定的dom元素.看看这段代码:

class ScrollingApp extends React.Component {
    ...
    _handleScroll(ev) {
        console.log("Scrolling!");
    }
    componentDidMount() {
        this.refs.list.addEventListener('scroll', this._handleScroll);
    }
    componentWillUnmount() {
        this.refs.list.removeEventListener('scroll', this._handleScroll);
    }
    render() {
        return (
            <div ref="list">
                {
                    this.props.items.map( (item) => {
                        return (<Item item={item} />);
                    })
                }
            </div>
        );
    }
}

代码非常简单,正如您所看到的,我想处理div#list scrolling.当我运行这个例子时,它不起作用.所以我尝试直接绑定this._handleScroll渲染方法,它也不起作用.

<div ref="list" onScroll={this._handleScroll.bind(this)> ... </div>

所以我打开了chrome检查器,直接添加onscroll事件:

document.getElementById('#list').addEventListener('scroll', ...);

它正在工作!我不知道为什么会这样.这是React的错误还是什么？还是我错过了什么？任何设备都将非常感激.