响应JS inview事件

Question

如何在React 中添加inview事件

就像这样：

<div inview={handleInView}></div>

我需要将它添加到页脚上，这样我就可以在页面中加载更多的新闻。谢谢。

Answer 1

您可以绑定滚动事件并测试元素的位置，该位置可以更改组件的状态或触发所需的任何其他方法/事件。

为了简单起见，我在这里使用了jQuery作为示例，方法是使用ref针对元素，但是如果不使用ref就可以做到这一点。React有一些内置的滚动东西，它们在这里覆盖它们，http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html。注意:这个链接已经很老了，所以我肯定还有更好的文档。

var Component = React.createClass({
  getInitialState: function(){
    return {
      text: 'Not in view'
    }
  },
  componentDidMount: function(){
    $(window).on('scroll', this.inview);
  },
  inview: function () {

    var $e = $( React.findDOMNode(this.refs.footer) ),
        $w = $( window ),
        wt = $w.scrollTop(),
        wb = wt + $w.height(),
        et = $e.offset().top,
        eb = et + $e.height();

    var isVisible = eb >= wt && et <= wb;

    this.setState({'text': isVisible ? 'In view' : 'Not in view'});
  },
  render: function(){
    return (
      <div>
        <h1>{this.state.text}</h1>
        <p>Scroll down</p>
        <footer ref="footer">FOOTER</footer>
       </div>
    )
  }
});

React.render(
  <Component />,
  document.getElementById('react')
);

链接，以查看它在JSBIN 这里中的工作情况。

Answer 2

我最近写了一个这样的组件。它在视图中触发onFetch支柱(由高级组件指定)。

import React, { Component, PropTypes } from 'react';
import { findDOMNode } from 'react-dom';
import classNames from 'classnames';
import { debounce } from 'underscore';

export default class ScrollLoader extends Component {

    componentDidMount() {
        this.scrollListener = debounce(this.fetchInView.bind(this), 200);
        window.addEventListener('scroll', this.scrollListener);
    }

    componentWillUnmount() {
        window.removeEventListener('scroll', this.scrollListener);
    }

    fetchInView() {
        const { loading, onFetch } = this.props;
        const { top } = findDOMNode(this).getBoundingClientRect();
        const OFFSET = 50; // ensure the element is at least 50 pixels in view

        if (!loading && top < window.innerHeight + OFFSET && typeof onFetch === 'function') {
            onFetch();
        }
    }

    render() {
        const { loading } = this.props;

        return (
            <div className={classNames('scrollloader', { 'scrollloader-loading' : loading })} />
        );
    }

}

ScrollLoader.propTypes = {
    loading: PropTypes.bool,
    onFetch: PropTypes.func
};