Как добавить активный класс в определенный раздел в приложении React / Preact без маршрутизатора реагирующего маршрутизатора - PullRequest
Новая
       8

Как добавить активный класс в определенный раздел в приложении React / Preact без маршрутизатора реагирующего маршрутизатора

0 голосов
/ 21 февраля 2019

Я работаю над приложением preact / реагировать, которое не имеет функции маршрутизации.Мы перемещаемся к определенному разделу, прокручивая или щелкая ссылку, используя идентификатор конкретного раздела.

Я знаю, используя реагирующий маршрутизатор, я могу добавить активный класс, используя тег NavLink.Но я хочу иметь такую ​​же функциональность в моем случае, а также иметь функцию прокрутки-шпиона, чтобы изменить стиль при прокрутке до определенного раздела.

Пример кода будет выглядеть следующим образом: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <ul>
    <li  style='display:inline'><a href="#firstSection">Section1</a></li>
    <li  style='display:inline'><a href="#secondSection">Section2</a></li>
    <li  style='display:inline'><a href="#thirdSection">Section3</a></li>
  </ul>
<section id='firstSection' style="margin: 300px;">
  This is first section.
</section>
<section id='secondSection' style="margin: 300px;">
  This is Second section.
</section>
<section id='thirdSection' style="margin: 300px;">
  This is Third section.
</section>

</body>
</html>

Пожалуйста, дайте мне знать, если потребуется дополнительная информация.

Я всегда буду благодарен вам, ребята, за помощь.

Ответы [ 3 ]

0 голосов
/ 21 февраля 2019

Вы хотите настроить таргетинг на событие onClick элемента, подобного этому 

className={ this.props.isActive ? 'navigation--active': '' }
  onClick={ this.props.onActiveTab }

Фрагмент, взятый из этого связанного вопроса

React add class active на выбранной вкладке

0 голосов
/ 08 марта 2019

Я получил это, работая с плагином Bootstrap Scrollspy через javascript.Приведенный ниже фрагмент кода отлично работает 

 $('body').scrollspy({ target: '#navbar-example' })

и добавляет data-target = "# id-of-section-you-want-to-spy" ко всем тегам li.

Thisявляется ссылочной ссылкой Bootstrap .

0 голосов
/ 21 февраля 2019

Вы можете наблюдать событие hashchange в окне, и в обратном вызове установить активный класс для ссылки, чей href соответствует window.location.hash.Подробнее о событии hashchange можно прочитать здесь:

https://developer.mozilla.org/en-US/docs/Web/Events/hashchange

...