react-waypoint onEnter/onLeave 没有给出价值

Question

我最近在尝试使用反应航点来隐藏和显示div。此代码在div 到达航点时成功隐藏div 在 onEnter 时位于"内部"。当它进入内部时，它将 isInView 变为真，这会将我的div 切换为真并显示自己。onLeave 的代码在这里可能有问题，但是当我控制台记录当前位置并且它低于航点时(或者在我的情况下，当我从显示的div 向上滚动时，它被控制台记录如下(，代码没有变成 false。

感谢您的帮助，我非常感谢！

class WhenInView extends Component {
constructor(props){
super(props);
this.state = {
isInView: false
};
this.onEnter = this.onEnter.bind(this);
this.onLeave = this.onLeave.bind(this);
}

onEnter({ currentPosition }){
console.log(currentPosition)
if (currentPosition === Waypoint.inside){
this.setState({
isInView: true
});
}
}
onLeave({ currentPosition }){
console.log(currentPosition)
if (this.currentPosition === Waypoint.below){  
this.setState({
isInView: false
});
}
}
render(){
return (
<div>
<Waypoint onEnter = {this.onEnter} onLeave ={this.onLeave}></Waypoint>
{this.props.children({ isInView: this.state.isInView})}
</div>
);
}
}
export default WhenInView;

Answer 1

这里的问题是你使用的是this.currentPosition而不是currentPosition，并且你没有currentPosition的状态变量，所以每次它返回undefined并且你的条件总是计算为false，所以控件甚至没有进入循环，所以这就是问题所在。 这应该是您的 onLeave 函数：

onLeave({ currentPosition }){
console.log(currentPosition)
if (currentPosition === Waypoint.below){  
this.setState({
isInView: false
});
}
}