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

Question

我最近在尝试 react-waypoint 来隐藏和显示一个 div。这段代码成功地隐藏了 div 当它击中航路点时是“内部”，当它是 onEnter 时。当它在里面时，它会将 isInView 变为 true，这会将我的 div 切换为 true 并显示自己。 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
        });
    }
}