亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 react-router-dom 中使用 <Link> 標簽重新渲染整個頁面

如何在 react-router-dom 中使用 <Link> 標簽重新渲染整個頁面

慕絲7291255 2022-01-07 10:18:45
請幫助我解決我在 react-router-dom 中的 Link 遇到的問題,如下所示:window.addEventListener("scroll", function() {        const theEle = document.getElementById("id-of-div");        const eleTop = theEle.offsetTop;        const eleBottom = eleTop + theEle.offsetHeight;        console.log("the element of new page", eleTop, eleBottom)    });因此,當我將上述腳本放在 X 頁中時,在 Y 頁中,我有一個<a href='/x'>Link to page X<a> 如果我在 Y 頁單擊它,那么您當然會轉到 X 頁并滾動鼠標,窗口檢測到鼠標滾動并注銷結果但是如果我在 react-router-dom 中使用了 Link 標簽,那么會出現一個錯誤,說 can't get offsetTop of 'id-of-div'<Link to='/x'>Link to page X</Link>我想知道有沒有一種方法可以強制 Link 在不使用 a 標簽的情況下完成這項工作,因為我真的不希望用戶每次從頁面 Y 轉到 X 時都重新渲染頁面 x。
查看完整描述

1 回答

?
婷婷同學_

TA貢獻1844條經驗 獲得超8個贊

顯然,如果您渲染其他頁面,id-of-div則不再渲染(它會從 DOM 中刪除),因此實際上您無法檢查它的offsetTop.


解決方案之一是檢查內部是否id-of-div存在:


window.addEventListener("scroll", function() {

    const theEle = document.getElementById("id-of-div");

    if (theEle) {

       const eleTop = theEle.offsetTop;

       const eleBottom = eleTop + theEle.offsetHeight;

       console.log("the element of new page", eleTop, eleBottom);

    }

});

然而,更靈活的解決方案是將偵聽器不與 . 連接window,而是連接到該頁面中的父包裝器x。但請記住,在特定情況下這是不可能的(取決于您的組件結構)。


查看完整回答
反對 回復 2022-01-07
  • 1 回答
  • 0 關注
  • 344 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號