在React.js中更新onScroll组件的样式
我已经在React中构build了一个组件，它应该在窗口滚动中更新自己的样式以创build视差效果。
组件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的值，并在滚动callback中调用setState ，但是，这使得滚动不可用，因为这是非常缓慢的。
任何build议如何做到这一点？
谢谢。
你应该在componentDidMount绑定监听器，这样只会创build一次。 你应该能够将风格存储在状态中，这个监听器可能是性能问题的原因。
像这样的东西：
componentDidMount: function() { window.addEventListener('scroll', this.handleScroll); }, componentWillUnmount: function() { window.removeEventListener('scroll', this.handleScroll); }, handleScroll: function(event) { let scrollTop = event.srcElement.body.scrollTop, itemTranslate = Math.min(0, scrollTop/3 - 60); this.setState({ transform: itemTranslate }); },
在使用Austins答案时注意到laggy行为/性能问题的任何人，并且希望使用评论中提到的参考文献的例子，下面是一个我用来切换上下滚动图标的例子：
在渲染方法中：
<i ref={(ref) => this.scrollIcon = ref} className="fa fa-2x fa-chevron-down"></i>
在处理程序方法中：
if (this.scrollIcon !== null) { if(($(document).scrollTop() + $(window).height() / 2) > ($('body').height() / 2)){ $(this.scrollIcon).attr('class', 'fa fa-2x fa-chevron-up'); }else{ $(this.scrollIcon).attr('class', 'fa fa-2x fa-chevron-down'); } }
并按照Austin提到的方法添加/删除您的处理程序：
componentDidMount(){ window.addEventListener('scroll', this.handleScroll); }, componentWillUnmount(){ window.removeEventListener('scroll', this.handleScroll); },
docs在参考 。
您可以将函数传递给React元素上的onScroll事件： https ： onScroll
<ScrollableComponent onScroll={this.handleScroll} />
另一个类似的答案： https ： //stackoverflow.com/a/36207913/1255973
