Javascript 反应JS查看事件

如何在React JS中添加inview事件？
大概是这样的：

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

---

谢谢。

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

为了简单起见，我在这里使用jQuery作为示例，通过使用ref来定位元素，但是不使用它也可以做到这一点。 React有一些内置的滚动条，他们在这里介绍。注意：这个链接很旧，所以我肯定有更好的文档

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')
);

var Component=React.createClass({
getInitialState:函数（）{
返回{
文本：“不在视图中”
}
},
componentDidMount:function（）{
$（window.on（'scroll'，this.inview））；
},
inview：函数（）{
var$e=$（React.findDOMNode（this.refs.footer）），
$w=$（窗口），
wt=$w.scrollTop（），
wb=wt+$w.高度（），
et=$e.offset（）.top，
eb=et+e.高度（）；
var isVisible=eb>=wt&&et您可以绑定一个滚动事件并测试元素的位置，该位置可以改变组件的状态或触发您需要的任何其他方法/事件

为了简单起见，我在这里使用jQuery作为示例，通过使用ref来定位元素，但是不使用它也可以做到这一点。
React有一些内置的滚动内容，他们在这里介绍。注意：链接很旧，所以我相信有更好的文档

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')
);

var Component=React.createClass({
getInitialState:函数（）{
返回{
文本：“不在视图中”
}
},
componentDidMount:function（）{
$（window.on（'scroll'，this.inview））；
},
inview：函数（）{
var$e=$（React.findDOMNode（this.refs.footer）），
$w=$（窗口），
wt=$w.scrollTop（），
wb=wt+$w.高度（），
et=$e.offset（）.top，
eb=et+e.高度（）；
var isVisible=eb>=wt&&et我最近写了一个这样的组件。当它出现时，它会触发
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
};

import React，{Component，PropTypes}来自'React'；
从'react dom'导入{findDOMNode}；
从“类名称”导入类名称；
从“下划线”导入{debounce}；
导出默认类ScrollLoader扩展组件{
componentDidMount（）{
this.scrollListener=debounce（this.fetchInView.bind（this），200）；
window.addEventListener（'scroll'，this.scrollListener）；
}
组件将卸载（）{
window.removeEventListener（'scroll'，this.scrollListener）；
}
fetchInView（）{
const{loading，onFetch}=this.props；
const{top}=findDOMNode（this）.getBoundingClientRect（）；
const OFFSET=50；//确保元素在视图中至少有50个像素
如果（！load&&top
我最近编写了一个类似这样的组件。当它出现时，它会触发
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
};

import React，{Component，PropTypes}来自'React'；
从'react dom'导入{findDOMNode}；
从“类名称”导入类名称；
从“下划线”导入{debounce}；
导出默认类ScrollLoader扩展组件{
componentDidMount（）{
this.scrollListener=debounce（this.fetchInView.bind（this），200）；
window.addEventListener（'scroll'，this.scrollListener）；
}
组件将卸载（）{
window.removeEventListener（'scroll'，this.scrollListener）；
}
fetchInView（）{
const{loading，onFetch}=this.props；
const{top}=findDOMNode（this）.getBoundingClientRect（）；
const OFFSET=50；//确保元素在视图中至少有50个像素
如果（！load&&top
谢谢你，你救了我一天！别担心，很高兴我能帮忙！谢谢你，你救了我一天！别担心，很高兴我能帮忙！