2 回答

TA貢獻(xiàn)1841條經(jīng)驗(yàn) 獲得超3個(gè)贊
在重定向到詳細(xì)頁面并將其存儲在狀態(tài)之前使用它。
let position = document.documentElement.scrollTop
這將給出您在頁面上的當(dāng)前位置。一旦你回到列表視圖使用
window.scrollTo(0, position)
回到你最初所在的地方。

TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超5個(gè)贊
您的元素位置可能只有一個(gè)真實(shí)來源。作為示例,我將位置狀態(tài)放在 Router 組件上,因?yàn)檫@似乎是 App 組件和 Details 的父級。
const Router = () => {
const [previousClickedItemPos, setPreviousClickedItemPos] = useState(0);
/* import useLocation so that useEffect can be invoked on-route-change */
const location = useLocation();
/* basically pass this to the list items so you can update position on-click */
function handleClickList(element) {
setPreviousClickedItemPos(element);
}
useEffect(() => {
/* scroll to the element previously selected */
window.scrollTo(0, previousClickedItemPos);
}, [previousClickedItemPos, location]);
...
在您的 InfiniteList 組件上:
<ListItem
onClick={e => {
dispatch({
type: "set",
payload: items
});
handleClickList(e.target.offsetTop); /* update position state */
goDetailScreen(item);
}}
key={item.key}
>
{item.value}
</ListItem>
代碼沙盒: https ://codesandbox.io/s/modern-breeze-nwtln ?file=/src/router.js
添加回答
舉報(bào)