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

来自react-waypoint docs：

如果你传递了一个孩子，它可以是一个DOM组件（例如<div>）   或复合组件（例如<MyComponent />）。

Waypoint需要DOM节点来计算其边界。当你通过   DOM组件到Waypoint，它处理对DOM的引用   节点通过ref prop自动。如果你传递一个复合词   组件，你需要利用传递的innerRef prop   Waypoint到您的组件。只需将其作为DOM的引用传递即可   组件和你一切都准备好了。就像在这个例子中一样：
class Block extends React.Component {
  render() {
    return <div ref={this.props.innerRef}>Hello</div>
  }
}
Block.propTypes = {
  innerRef: PropTypes.func.isRequired,
}

const App = () => (
  <Waypoint>
    <Block />
  </Waypoint>
)

在这里你使用了一个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;
}

编辑：我没有使用航点，但我认为它应该在event道具中显示您的组件参考。

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

1 个答案: