如何使用Waypoint获取活动元素？

Question

我正在使用React (16)中的Waypoint (7.3.2)来尝试创建一个可滚动项的列表，其中每个项目在到达div顶部时都会消失为不可见的。我的基本问题是如何获得对在事件或回调中输入/离开路径点的元素的引用？

我认为，通过在我想要在回调中获得的元素中包含ref={}，我将获得对元素的引用，并能够更改不透明度。下面是插入Waypoint的代码：

class Division extends Component {
    constructor(props) {
        super(props);
    }

    _handleWayPointEnter = (event) => {
        console.log("Waypoint enter " + JSON.stringify(event, 4));
    }
    _handleWayPointLeave = (event) => {
        console.log("Waypoint leave " + JSON.stringify(event, 4));
    }

    render() {
        let inlineStyle= {opacity : this.state.opacity};
        return (
            <Waypoint debug={false} onEnter={this._handleWayPointEnter} onLeave={this._handleWayPointLeave} >
                <div style={inlineStyle} ref={this.props.innerRef} className="sch-division">
                    {this.props.name}<br/>
                    <SomeOtherComponent />
                </div>
            </Waypoint>
        );
    }

}

export default Division;

如有任何/所有回复，不胜感激！

-格里夫

Answer 1

从反应点文档：

如果您确实传递了一个子组件，那么它可以是一个DOM组件(例如<div>)，也可以是一个复合组件(例如<MyComponent />)。 Waypoint需要一个DOM节点来计算其边界。当您将DOM组件传递给Waypoint时，它会自动通过ref支柱处理对DOM节点的引用。如果传递复合组件，则需要使用Waypoint传递给组件的innerRef支柱。只要将它作为DOM组件的参考文件传递，您就都准备好了。如本例所示： 类块扩展了React.Component {呈现() {返回Hello }} Block.propTypes ={ innerRef: PropTypes.func.isRequired，} const =() => ()

在这里您使用的是单个DOM组件(<div>)，我建议您按如下方式存储您的div：

<div style={inlineStyle} ref={(div) => { this.divinwaypoint = div; }} className="sch-division">

然后在您的函数中使用它：

_handleWayPointEnter = (event) => {
   console.log("Waypoint enter " + JSON.stringify(event, 4));
   this.divinwaypoint.style.opacity = 0;
}

编辑:我没有使用waypoint，但是我认为它应该在event道具中显示您的组件ref。