我在React中构建了一个组件，它应该在窗口滚动上更新自己的风格，以创建视差效果。
组件渲染方法是这样的:
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。然而，这使得滚动无法使用，因为它非常慢。
有什么建议吗?
要扩展@Austin的回答，你应该加上这个。handleScroll = this.handleScroll.bind(this)到你的构造函数:
constructor(props){
this.handleScroll = this.handleScroll.bind(this)
}
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
});
},
...
这使handleScroll()在从事件侦听器调用时可以访问适当的范围。
还要注意，你不能在addEventListener或removeEventListener方法中执行.bind(this)，因为它们将各自返回对不同函数的引用，并且当组件卸载时，事件不会被删除。
使用useEffect的函数组件示例:
注意:你需要通过在useEffect中返回一个“清理”函数来删除事件监听器。如果不这样做，每次组件更新时，都会有一个额外的窗口滚动侦听器。
import React, { useState, useEffect } from "react"
const ScrollingElement = () => {
const [scrollY, setScrollY] = useState(0);
function logit() {
setScrollY(window.pageYOffset);
}
useEffect(() => {
function watchScroll() {
window.addEventListener("scroll", logit);
}
watchScroll();
// Remove listener (like componentWillUnmount)
return () => {
window.removeEventListener("scroll", logit);
};
}, []);
return (
<div className="App">
<div className="fixed-center">Scroll position: {scrollY}px</div>
</div>
);
}
我在这里打赌是使用带有新钩子的函数组件来解决它，但不是像以前的答案那样使用useEffect，我认为正确的选择是useLayoutEffect，原因很重要:
签名与useEffect相同，但是它同步触发
在所有DOM突变之后。
这可以在React文档中找到。如果我们使用useEffect代替，并且重新加载已经滚动的页面，则scroll将为false，并且我们的类将不会被应用，从而导致不希望出现的行为。
一个例子:
import React, { useState, useLayoutEffect } from "react"
const Mycomponent = (props) => {
const [scrolled, setScrolled] = useState(false)
useLayoutEffect(() => {
const handleScroll = e => {
setScrolled(window.scrollY > 0)
}
window.addEventListener("scroll", handleScroll)
return () => {
window.removeEventListener("scroll", handleScroll)
}
}, [])
...
return (
<div className={scrolled ? "myComponent--scrolled" : ""}>
...
</div>
)
}
这个问题的一个可能的解决方案是https://codepen.io/dcalderon/pen/mdJzOYq
const Item = (props) => {
const [scrollY, setScrollY] = React.useState(0)
React.useLayoutEffect(() => {
const handleScroll = e => {
setScrollY(window.scrollY)
}
window.addEventListener("scroll", handleScroll)
return () => {
window.removeEventListener("scroll", handleScroll)
}
}, [])
return (
<div class="item" style={{'--scrollY': `${Math.min(0, scrollY/3 - 60)}px`}}>
Item
</div>
)
}
要扩展@Austin的回答，你应该加上这个。handleScroll = this.handleScroll.bind(this)到你的构造函数:
constructor(props){
this.handleScroll = this.handleScroll.bind(this)
}
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
});
},
...
这使handleScroll()在从事件侦听器调用时可以访问适当的范围。
还要注意，你不能在addEventListener或removeEventListener方法中执行.bind(this)，因为它们将各自返回对不同函数的引用，并且当组件卸载时，事件不会被删除。
一个使用classNames, React挂钩useEffect, useState和styles -jsx的例子:
import classNames from 'classnames'
import { useEffect, useState } from 'react'
const Header = _ => {
const [ scrolled, setScrolled ] = useState()
const classes = classNames('header', {
scrolled: scrolled,
})
useEffect(_ => {
const handleScroll = _ => {
if (window.pageYOffset > 1) {
setScrolled(true)
} else {
setScrolled(false)
}
}
window.addEventListener('scroll', handleScroll)
return _ => {
window.removeEventListener('scroll', handleScroll)
}
}, [])
return (
<header className={classes}>
<h1>Your website</h1>
<style jsx>{`
.header {
transition: background-color .2s;
}
.header.scrolled {
background-color: rgba(0, 0, 0, .1);
}
`}</style>
</header>
)
}
export default Header
