reactjs - 如何在 blueprintjs 表格中实现无限滚动

Question

有没有人在 BlueprintJS 表格中实现了无限滚动？

我的要求是在用户滚动表格时从 api 获取表格日期。我尝试过使用onCompleteRenderBlueprintJS 表格的道具，但它不符合我的要求，因为所有页面都是一次性获取的。
我试过的是

  <div>
                {this.props.spiders.spiders.length !==0 ?
                <Table numRows={this.props.spiders.spiders.length} defaultRowHeight={45} defaultColumnWidth={180} className="bp3-dark tableheight" onCompleteRender={this.scroll} enableRowHeader={false}>
                    <Column name="Name" cellRenderer={cellRenderer} />
                    <Column name="Developer" cellRenderer={cellRenderer}  />
                    <Column name="Status"  cellRenderer={cellRenderer} />
                    <Column name="Workers" cellRenderer={cellRenderer}  />
                    <Column name="Customer"  cellRenderer={cellRenderer} />
                    <Column name="Last Run"  cellRenderer={cellRenderer} />
                    <Column name="Proxy" cellRenderer={cellRenderer}  />
                </Table> :''}
  </div>

我的scroll方法是

scroll = () =>{
       if(this.props.spiders.next!=null)
       {
           this.props.spiders.page = this.props.spiders.page + 1;
           this.props.pagination()

       }
    }

Answer 1

我们可以使用该onWheel事件来监听滚动事件，然后检查我们是否靠近元素底部以加载下一页。它可以实现为

  <div className="spiderList" id="spidertable" onWheel={this.scrolling} ref="spiders" >
                {this.props.spiders.spiders.length !== 0 ?
                    <Table className="bp3-dark" numRows={this.props.spiders.spiders.length} defaultRowHeight={45} defaultColumnWidth={180} enableRowHeader={false} >
                        <Column name="Name" cellRenderer={cellRenderer} />
                        <Column name="Developer" cellRenderer={cellRenderer} />
                        <Column name="Status" cellRenderer={cellRenderer} />
                        <Column name="Workers" cellRenderer={cellRenderer} />
                        <Column name="Customer" cellRenderer={cellRenderer} />
                        <Column name="Last Run" cellRenderer={cellRenderer} />
                        <Column name="Proxy" cellRenderer={cellRenderer} />
                    </Table> : ''}
            </div>

滚动处理程序需要检查是否div已到达底部，这可以使用

 scrolling() {
        const table = document.getElementById('spidertable')
        if (this.isBottom(table)) {
            if (this.props.spiders.next != null && this.props.loading === false) {
                this.props.spiders.page = this.props.spiders.page + 1;
                //call the api to fetch more table pages
            }
        }
    }

我们可以使用以下方法检测用户是否滚动到表格底部

 isBottom(el) {
        return el.getBoundingClientRect().bottom <= window.innerHeight;
    }