Question

我有一个计数器组件，最多可以计算页面上的数字。我需要它来运行用户滚动到页面上的那一点。我如何使用Waypoint做到这一点？还是有另一种解决方案吗？

import React, { Component } from 'react';
import Waypoint from 'react-waypoint';

var Counter2017 = React.createClass({

   getInitialState: function() {
      return {visionElapsed: 0};
   },
   tick: function() {
      if (this.state.visionElapsed < 125) {
      this.setState({visionElapsed: this.state.visionElapsed + 1});
      }
   },
   componentDidMount: function() {
      this.interval = setInterval(this.tick, 15);
   },
   componentWillUnmount: function() {
      clearInterval(this.interval);
   },
   render: function() {
      return (
         <span>{this.state.visionElapsed}</span>
      );
   }
});

export default Counter2017;

Answer 1

您可以尝试使用componentDidUpdate(prevProps, prevState)。在该方法中，您将收到有关状态变化的通知。当用户到达该点时，调用您需要的内容。

更多文档： https://facebook.github.io/react/docs/react-component.html#componentdidupdate

Answer 2

您可以将您的航点插入您想要的位置（它是一个DOM元素）。

所以你会有这样的东西：

<div>
  <AnyComponents />
  <Waypoint
    onEnter={() => this.interval = yourInterval}
  />
</div>

当然，你可以检查是否已经有一个间隔，所以你不要覆盖它。您还可以在Waypoint组件上设置onLeave道具。我建议你在这里阅读：https://github.com/brigade/react-waypoint

Answer 3

最好的办法是使用react-waypoint lib

使用Waypoint with React在滚动后执行一个函数

3 个答案: