1

无限滚动组件位于表格中，并且位于可滚动页面中。我尝试给 id="scrollableDiv"页面中的每个 div 以及<html>index.html 中的每个 div 仍然没有用。当我删除 scrollableTarget="scrollableDiv" fetchdata 直到底部的父滚动条。之后 fetchData 功能不起作用。当我强制滚动父滚动 fetchdata 工作。

但我希望它能够滚动表格。不是在滚动父级时（我的意思是整个页面），有人告诉我应该在哪里 assingn id="scrollableDiv"。没有指定高度的 div

这是代码，

  const fetchMoreData = () => {
console.log("new more data");
const temp = [...ingestStats];
setTimeout(() => {
  setIngestStats((prev) => prev.concat(temp));
}, 1500);};

           <div className="row">
            <div className="col-xl-12">
              <div className="card dashboard-table">
                {/* /.card-header */}
                <div className="card-body p-0" id="collapse1">
                  <InfiniteScroll
                    dataLength={ingestStats.length}
                    next={fetchMoreData}
                    hasMore={ingestStats.length < 40 ? true : false}
                    loader={
                      <p style={{ textAlign: "center" }}>
                        <b>Loading...</b>
                      </p>
                    }
                    endMessage={
                      <p style={{ textAlign: "center" }}>
                        <b>Yay! You have seen it all</b>
                      </p>
                    }
                    scrollableTarget="scrollableDiv"
                  >
                    <table className="table table-hover table-borderless  text-center table-sm table-responsive">
                      <thead>
                        <tr>
                          <th>Activity</th>
                          <th>
                            Time Stamp{" "}
                            <span href="#0">
                              <i className="fas fa-angle-down" />
                            </span>
                          </th>
                          <th>
                            Status{" "}
                            <span href="#0">
                              <i className="fas fa-angle-down" />
                            </span>
                          </th>
                        </tr>
                      </thead>

                      <tbody>
                        {ingestStats &&
                          ingestStats.map((item, index) => (
                            <tr key={`${item.time}-${index}`}>
                              <td>{item.activity}</td>
                              <td>{item.time}</td>
                              <td>
                                {item.isActive ? (
                                  <span className="status-success">
                                    Success
                                  </span>
                                ) : (
                                  <span className="status-failed">
                                    Success
                                  </span>
                                )}
                              </td>
                            </tr>
                          ))}
                      </tbody>
                    </table>
                  </InfiniteScroll>
                </div>
                {/* /.card-body */}
              </div>
            </div>
          </div>
4

0 回答 0