Как повторно отрендерить полную страницу с тегом <Link>в Reaction-router-dom - PullRequest
Новая
       14

Как повторно отрендерить полную страницу с тегом <Link>в Reaction-router-dom

0 голосов
/ 21 ноября 2019

, пожалуйста, помогите мне с проблемой, с которой я столкнулся в Link-реактиве-router-dom, вот так: 

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 и прокрутите мышь, окно обнаружит прокрутку мыши и выйдет из системы.

Но если я использовал ссылкув ответе на router-router-dom возникнет ошибка, говорящая о невозможности получить offsetTop для 'id-of-div' 

<Link to='/x'>Link to page X</Link>

Интересно, есть ли способ заставить Link выполнять работу безиспользуя тег, потому что я действительно не хочу, чтобы пользователь перерисовывал страницу x каждый раз, когда он переходит со страницы Y на X.

1 Ответ

0 голосов
/ 21 ноября 2019

Очевидно, что если вы визуализируете другую страницу, 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. Но имейте в виду, что в некоторых случаях это может быть невозможно (зависит от структуры ваших компонентов).

...