Как я могу использовать прокрутку для просмотра с другой / другой страницы с реакцией и редукцией? - PullRequest
0 голосов
/ 11 марта 2020

Я немного новичок в области внешнего интерфейса и только что получил свою первую работу в этой области. Я сейчас работаю над сайтом, созданным с помощью React и Redux. Проблема, которую я имею, находится на странице, которая содержит несколько разделов div. Кнопки на панели навигации используют событие React onClick для получения идентификатора раздела, связанного с кнопкой, а затем «Прокрутить в вид», чтобы прокрутить раздел вниз. Это прекрасно работает, хотя я хочу иметь возможность добраться до одной и той же страницы и прокрутить просмотр с другой страницы. Вот пример с кнопки Navbar:

<li>
  <FormattedMessage id="section.categories.funny">
    {text => (
        <button
            type="button"
                onClick={e => {
                    e.preventDefault();
                        if (document.getElementById('funny') !== null) {
                            document
                                .getElementById('funny')
                                .scrollIntoView({ block: 'start', behavior: 'smooth' });
                                }
                    }}
                >
            {text}
        </button>
    )}
  </FormattedMessage>
</li>

Примером этого может быть: Допустим, эта страница на: 'url.com/categories'. Когда я нажимаю кнопку с надписью «прикол» в этом URL-адресе, страница прокручивается вниз до раздела с идентификатором «прикол» без проблем. Но я также мог бы быть на другой странице - скажем, "url.com/categories/stories" - там есть та же панель навигации, и когда я нажимаю кнопку с надписью "смешно", я бы хотел, чтобы меня перенаправили на "url.com/categories", а затем прокрутите вниз до "смешного" раздела.

Я надеюсь, что мой вопрос имеет смысл, и если это не так, дайте мне знать! Английский sh не является моим родным языком, и умение задавать правильные вопросы, кажется, играет большую роль в обучении кодированию. :) Как я уже сказал, я довольно новичок в этом и совсем не много работаю с React или Redux. Спасибо! / Joel

1 Ответ

1 голос
/ 25 марта 2020

У меня была такая же проблема, и я использовал React-Router-Ha sh -Link

import { HashLink as Link } from 'react-router-hash-link';

<Link smooth to="/some/path#with-hash-fragment">Link to Hash Fragment</Link>

Плавная опора позволяет прокручивать элемент.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...