Question

我正在处理没有路由功能的预先/反应应用程序。我们通过使用特定部分的ID滚动或单击链接来导航到特定部分。

我知道使用react-router我可以使用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>

请让我知道是否需要更多信息。

我将一直感谢你们的帮助。

Answer 1

您可以在窗口上观察git config --global http.sslCAInfo "C:\\certs\\cacert.pem"事件，并在回调中将活动类设置为链接与hashchange匹配的href。您可以在此处阅读有关window.location.hash事件的更多信息：

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

Answer 2

嗨，我会对此发表评论，但是我不能...在Piotr Szlagura答案上进行扩展我发现了关于react中锚链接的有用链接

https://www.reddit.com/r/reactjs/comments/560ubo/how_to_set_react_achor_tag_links/

Answer 3

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

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

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

4 个答案: