如何在React Table组件中使用react-infinite-scroll-component无限滚动包？

你的实现思路完全没问题，不过我可以给你几个小建议，让表格的无限滚动体验更顺畅：

• 确保组件正确导入：先确认已经通过npm安装了包，并且在组件顶部导入了InfiniteScroll：

  import InfiniteScroll from 'react-infinite-scroll-component';
  

• 优化加载/结束提示的布局：你当前的loader和endMessage是直接放在<tbody>里的独立元素，这会打乱表格的结构。建议把它们用<tr>和<td>包裹，利用colSpan让提示跨所有列显示，保持表格布局的一致性：

  loader={
    <tr>
      <td colSpan="6" style={{ textAlign: 'center', padding: '1rem' }}>
        <h4>Loading...</h4>
      </td>
    </tr>
  }
  endMessage={
    <tr>
      <td colSpan="6" style={{ textAlign: 'center', padding: '1rem' }}>
        <b>Yay! You have seen it all</b>
      </td>
    </tr>
  }
  

• 状态更新要准确：记得在fetchData函数里，成功获取新数据后要正确更新logs.list（比如用数组拼接的方式添加新数据），同时根据接口返回结果设置logs.hasMore为true或false，这样组件才能正确判断是否继续触发加载。

调整后的完整代码示例：

<table className="table table-sm table-dark table-striped table-hover">
  <thead className="">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Type</th>
      <th scope="col">Object</th>
      <th scope="col">Url</th>
      <th scope="col">Ip</th>
      <th scope="col">Detail</th>
    </tr>
  </thead>
  <tbody>
    <InfiniteScroll
      dataLength={logs.list.length}
      next={fetchData}
      hasMore={logs.hasMore}
      loader={
        <tr>
          <td colSpan="6" style={{ textAlign: 'center', padding: '1rem' }}>
            <h4>Loading...</h4>
          </td>
        </tr>
      }
      endMessage={
        <tr>
          <td colSpan="6" style={{ textAlign: 'center', padding: '1rem' }}>
            <b>Yay! You have seen it all</b>
          </td>
        </tr>
      }
    >
      {logs.list.map((l, i) => (
        <tr key={l.id}>
          <th scope="row">{l.id}</th>
          <td>{l.key}</td>
          <td>{l.object}</td>
          <td>{l.url}</td>
          <td>{l.ip}</td>
          <td>----</td>
        </tr>
      ))}
    </InfiniteScroll>
  </tbody>
</table>

内容的提问来源于stack exchange，提问作者Adnan Ahmad