在页面上的可滚动组件中反应 InfiniteScroll

Question

我正在尝试在 div 中构建一个具有固定高度并附有滚动条的无限滚动条，因此我的目标是 window 不移动，而是移动其中的一个组件有一个卷轴，其中的项目将无限添加。

这是我目前所拥有的：

import React, { useState } from "react";
import ReactDOM from "react-dom";
import InfiniteScroll from "react-infinite-scroll-component";

const style = {
  height: 18,
  border: "1px solid green",
  margin: 6,
  padding: 8
};

const DoseListCardBody = () => {
  const [items, setItems] = useState(Array.from({ length: 20 }));

  const fetchMoreData = () => {
    setItems(items.concat(Array.from({ length: 10 })));
  };

  return (
    <div style={{ height: "100%", overflowY: "scroll" }}>
      <InfiniteScroll
        dataLength={items.length}
        next={fetchMoreData}
        hasMore={items.length < 200}
        loader={<h4>Loading...</h4>}
      >
        {items.map((i, index) => (
          <div style={style} key={index}>
            div - #{index}
          </div>
        ))}
      </InfiniteScroll>
    </div>
  );
};

ReactDOM.render(
  <div style={{ height: "35rem", background: "black" }}>
    <div style={{ height: "30rem", background: "white" }}>
      <DoseListCardBody />
    </div>
  </div>,
  document.getElementById("root")
);

如果我改变一切正常

ReactDOM.render(
  <div style={{ height: "35rem", background: "black" }}>
    <div style={{ height: "30rem", background: "white" }}>
      <DoseListCardBody />
    </div>
  </div>,
  document.getElementById("root")
);

至

ReactDOM.render(
  <DoseListCardBody />,
  document.getElementById("root")
);

我认为这是因为它使用的是 window 而不是组件的滚动。

如何让 InfiniteScroll 使用父组件或带有我指定的滚动条的组件。

我很抱歉使用了不好的术语，我通常不开发网页。

Answer 1

好的，知道了！

必须在 InfiniteScroll 中使用 scrollableTarget 作为属性，并指定具有滚动条的组件的 ID。

示例：

const DoseListCardBody = () => {
  const [items, setItems] = useState(Array.from({ length: 20 }));

  const fetchMoreData = () => {
    setItems(items.concat(Array.from({ length: 10 })));
  };

  return (
    <div id="scrollableDiv" style={{ height: "100%", overflowY: "scroll" }}>
      <InfiniteScroll
        dataLength={items.length}
        next={fetchMoreData}
        hasMore={items.length < 200}
        loader={<h4>Loading...</h4>}
        scrollableTarget="scrollableDiv"
      >
        {items.map((i, index) => (
          <div style={style} key={index}>
            div - #{index}
          </div>
        ))}
      </InfiniteScroll>
    </div>
  );
};

注意添加了 'id="scrollableDiv"' 和 'scrollableTarget="scrollableDiv"'。

在页面上的可滚动组件中反应 InfiniteScroll

React InfiniteScroll in a scrollable component on the page

reactjs

infinite-scroll