Реагируйте InfiniteScroll на прокручиваемый компонент на странице - PullRequest
Новая
       26

Реагируйте InfiniteScroll на прокручиваемый компонент на странице

0 голосов
/ 11 января 2020

Я пытаюсь построить бесконечный свиток в элементе div с фиксированной высотой и прикрепленным к нему свитком, поэтому моя цель - чтобы окно не двигалось, а внутри компонента имелся свиток, а элементы внутри были добавлены бесконечно.

это то, что у меня есть: 

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")
);

Я думаю, это потому, что он использует прокрутку окна, а не компонент.

Как заставить InfiniteScroll использовать родительский компонент или компонент с указанной мной прокруткой.

Я прошу прощения за плохую терминологию, я обычно не занимаюсь разработкой веб-страниц.

1 Ответ

0 голосов
/ 11 января 2020

хорошо, понял!

необходимо использовать scrollableTarget в качестве реквизита в InfiniteScroll и указать идентификатор компонента, имеющего полосу прокрутки.

пример: 

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 "'.

...