gpt4 book ai didi

reactjs - 在页面上的可滚动组件中 react InfiniteScroll

转载 作者:行者123 更新时间:2023-12-04 16:27:45 27 4
gpt4 key购买 nike

我试图在具有固定高度的 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 使用父组件或带有我指定的滚动的组件。

我为不好的术语道歉,我通常不开发网页。

最佳答案

好的,我知道了!
必须在 InfiniteScroll 中使用 scrollableTarget 作为 prop 并指定具有滚动条的组件的 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"'。

关于reactjs - 在页面上的可滚动组件中 react InfiniteScroll,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59689791/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com