react移动端上拉加载更多组件

在开发移动端react项目中，遇到了上拉加载更多数据的分页功能，自己封装了一个组件，供大家参考，写的不好还请多多指教！
　　

import React, {Component} from 'react';
import cssModuleHandler from "../../../utils/cssModuleHandler";
import styleObject from './LoadMore.scss';
 
const GSV = cssModuleHandler(styleObject);
 
class LoadMore extends Component {
    constructor(props) {
        super(props);
    }
 
    componentDidMount() {
        const loadMoreFn = this.props.loadMoreFn;
 
        const callback = () => {
            if (this.getScrollTop() + this.getWindowHeight() + 100 > this.getScrollHeight()) {
                loadMoreFn();
            }
        }
 
        //滚动事件
        let timeAction;
        window.addEventListener('scroll', () => {
            if (this.props.isLoadingMore) {
                return;
            }
 
            if (timeAction) {
                clearTimeout(timeAction);
            }
 
            timeAction = setTimeout(callback, 50);
        });
    }
 
    //滚动条在Y轴上的滚动距离
    getScrollTop() {
        let scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
        if (document.body) {
            bodyScrollTop = document.body.scrollTop;
        }
        if (document.documentElement) {
            documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
        return scrollTop;
    }
 
    //文档的总高度
    getScrollHeight() {
        let scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
        if (document.body) {
            bodyScrollHeight = document.body.scrollHeight;
        }
        if (document.documentElement) {
            documentScrollHeight = document.documentElement.scrollHeight;
        }
        scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
        return scrollHeight;
    }
 
    //浏览器视口的高度
    getWindowHeight() {
        let windowHeight = 0;
        if (document.compatMode == "CSS1Compat") {
            windowHeight = document.documentElement.clientHeight;
        } else {
            windowHeight = document.body.clientHeight;
        }
        return windowHeight;
    }
 
    render() {
        return (
            <React.Fragment>
                {this.props.isLoadingMore
                    ? <div className={GSV('loadMore')} ref='wrapper'><img
                        src={require('../../../static/img/common/ic/spinner.png')} alt=""/></div>
                    : ''}
            </React.Fragment>
        )
    }
}
 
export default LoadMore;

　在需要分页的组件中引入LoadMore组件：

import React, {Component} from 'reactimport {observer, inject} from "mobx-react";import {InputItem} from 'antd-mobile';
 
import LoadMore from "../../../../../components/Commoncomponent/LoadMore/LoadMore";
import PrizeList from "./view/PrizeList/PrizeList";
import cssModuleHandler from "../../../utils/cssModuleHandler";
import styleObject from './index.scss';
 
const GSV = cssModuleHandler(styleObject);
 
@inject("commonAction", "commonStore", "giftCouponStore", "giftCouponAction")
@observer
class GiftCoupon extends Component {
    constructor(props) {
        super(props);
 
        this.pageNo = 0;
        this.itemPerPage = 200;
    }
 
    componentDidMount() {
        //初始化数据
        this.loadMoreFn();
    }
 
    //加载更多
    loadMoreFn = () => {
        this.pageNo++;
 
        this.props.giftCouponAction.queryBonusListPage({
            pageNo: this.pageNo,
            itemPerPage: this.itemPerPage
        });
    }
 
    render() {
        const {giftCouponList, isLoadingMore} = this.props.giftCouponStore;
 
        return (
            <div className={GSV('otherGiftCouponWrapper')}>
                {
                    giftCouponList.length > 0 &&
                         {/*礼券列表*/}
                         <PrizeList giftCouponAction={this.props.giftCouponAction}
                                    data={giftCouponList}
                                    loadMoreFn={this.loadMoreFn}
                                    isLoadingMore={isLoadingMore}
                         />
 
                }
　　　　　　　　　　{/*加载更多*/}
　　　　　　　　　　<LoadMore loadMoreFn={loadMoreFn}  isLoadingMore={isLoadingMore}/>
 
            </div>
        )
    }
}
 
export default GiftCoupon;