反应无限滚动组件表体

Question

有没有办法在“表格”中使用 react 无限滚动组件包？ https://www.npmjs.com/package/react-infinite-scroll-component 这是我的代码。

<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} //This is important field to render the next data
                  next={fetchData}
                  hasMore={logs.hasMore}
                  loader={<h4>Loading...</h4>}
                  endMessage={
                    <p style={{ textAlign: "center" }}>
                      <b>Yay! You have seen it all</b>
                    </p>
                  }
                >
                  {logs.list.map((l, i) => {
                    return (
                      <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>

Answer 1

是的，您只需将<InfiniteScroll> 向外移动以包裹整个<table>，而不是将其放在<tbody> 内。否则，当它渲染你的加载消息时，你会得到无效的 DOM 嵌套。