Javascript 如何制作无限卷轴；“加载更多”；在reactjs中

我是新来的

reactjs

，我很困惑如何制作无限滚动条或“加载更多”功能

下面是我的

组件didmount

：

 componentDidMount() {
  $.ajax({
  url:'http://localhost:5118/api/employeedetails/getemployeedetails/',
  success:(data)=>{

    this.setState({
      jsonReturnedValue:data , isLoading: false
    })
  }
})

}

这是我装桌子的地方

renderItem(d, i) {
  return <tr key={i} >
    <td> {d.Employee_ID} </td>
    <td>{d.Employee_Name}</td>
    <td>{d.Address }</td> 
    <td><center><button className ="btn btn-info" onClick={this.handleOnclick.bind(this,  d.Employee_ID, d.Employee_Name, d.Address , d.Department , i)}   data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
    <td><center><button className ='btn btn-danger'  onClick={this.handleOnclick2.bind (this,d.Employee_ID,d.Employee_Name,i)} data-toggle="modal" data-target="#DeleteEmployee"> Delete</button></center></td>
    </tr>
}

render() {
      if(this.state.isLoading) {
           return <span className="Loader">
                  <h1>
              <span>Loading</span>
              <span className="Loader-ellipsis" >
                <span className="Loader-ellipsisDot">.</span>
                <span className="Loader-ellipsisDot">.</span>
                <span className="Loader-ellipsisDot">.</span>
              </span>
            </h1>
        </span>
     }

    let {jsonReturnedValue} = this.state;
    const isEnabled = this.canBeSubmitted();


  return(
    <div>
    <div>

        <div className="container">   
          <h1> Listof Employees </h1>
            <button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button>
             <table className= "table table-bordered" id="result"> 
                <tbody>
                 <tr>
                      <th>ID</th>
                      <th>Name</th>
                      <th>Address</th>
                      <th>Update</th>
                      <th>Delete</th>
                 </tr>
                   {/*  {this.state.tableLoading? <LoadingComponent/>: this.renderItem()}
        */} 
                    {jsonReturnedValue.map((d,i) => this.renderItem(d,i))} 

        </tbody>

            </table>
          </div>

renderItem（d，i）{
返回
{d.Employee_ID}
{d.Employee_Name}
{d.Address}
编辑
删除
}
render（）{
if（此.state.isLoading）{
返回
加载
.
.
.
}
让{jsonReturnedValue}=this.state；
const isEnabled=this.canbesubmited（）；
返回(
雇员名单
添加员工
身份证件
名称
地址
更新
删除
{/*{this.state.tableLoading？：this.renderItem（）}
*/} 
{jsonReturnedValue.map（（d，i）=>this.renderItem（d，i））}

您首先需要绑定一个onScroll eventListener，您可以在

componentDidMount（）中进行绑定

然后，您需要在组件中定义onScroll方法，并检查用户是否已滚动到页面底部：

onScroll = () => {
  // write your code here to check if user has scrolled to the bottom of page
 if(true) { // scrollbar is at the bottom
  this.fetchMoreData();
 }
}

然后定义fetchMoreData函数来更新jsonReturnedValue的列表

这只是一个蓝图。你需要自己处理功能

要检查滚动，请参阅此

要进一步了解React中的事件侦听器，请参阅

到达div的底部后，将调用retrieveMoreNotifications（）。
loadMore在没有更多数据可检索时将设置为false。
在scroll事件上添加eventListener应该可以完成您的工作。哦，我知道它是如何工作的？如果您希望在表中执行此操作，请改用分页。我很想这样做，但无限滚动器不是我的选择。感谢您的回答，我只是感到困惑我应该将scrollAdd放在组件中的任何位置。下面是React类组件？嗯，我明白了，但它怎么说加载更多？您还需要在api端添加分页功能，默认情况下，它将返回特定数量的记录，比如20。它还将接受一些pagenumber参数，您可以使用这些参数获取记录在每个回复中，它会告诉您总页码和当前页码，以便您知道是否有更多记录？
onScroll = () => {
  // write your code here to check if user has scrolled to the bottom of page
 if(true) { // scrollbar is at the bottom
  this.fetchMoreData();
 }
}

    componentDidMount() 
  {
    let _this = this;
    $('#notificationMainDiv').on('scroll', function() {
      if($(this).scrollTop() + $(this).innerHeight() >= $(this [0].scrollHeight) 
      {
        if(_this.state.loadMore)
        {
          _this.retrieveNotifications();
        }
      }
    })
  }