如何在没有 react-router 路由器的情况下将 active class 添加到 React/Preact 应用程序中的特定部分

Question

我正在开发 preact/react 没有路由功能的应用程序。我们使用特定部分的 id 滚动或单击 link 导航到特定部分。

我知道使用 react-router 我可以使用 NavLink 标签添加活动 class。但是我想在我的情况下具有相同的功能，并且还需要具有滚动间谍功能以便在我滚动到特定部分时更改样式。

示例代码如下所示：

<!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>

如果需要更多信息，请告诉我。

我将永远感谢你们的帮助。

Answer 1

您可以在 window 上观察 hashchange 事件，并在回调中将活动 class 设置为 link，href 与 window.location.hash 匹配。您可以在此处阅读有关 hashchange 活动的更多信息：

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

Answer 2

您想像这样定位元素的 onClick 事件

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

摘自这个相关问题的片段

Answer 3

我通过 javascript 使用 Bootstrap Scrollspy 插件实现了该功能。下面的代码完美运行

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

并在所有 li 标签中添加 data-target="#id-of-section-you-want-to-spy"。

这是参考 link Bootstrap.

如何在没有 react-router 路由器的情况下将 active class 添加到 React/Preact 应用程序中的特定部分

How to add active class to particular section in React/ Preact application without react-router router

reactjs

react-router

preact