如何在react中不使用钩子更新页面滚动上的URL？

Question

我正在尝试在 React 中创建一个平滑的滚动页面。该页面分为 4 个部分：

概述

关于我们

课程

新闻

所以在滚动时，如果它位于 id=news 的“新闻”部分，则 URL 应更新为：website.com/specic-string#news，以便他可以复制此链接，并且当您访问此 URL 时向您发送直接到该部分。

我使用的是React版本16.3.1。所以这里不能使用钩子。

添加此平滑滚动功能后，我需要显示一个按钮，用于下载视口中该部分的内容。 我对反应很陌生，并尝试通过每天挑战自己来学习新事物。有谁可以指导我吗？

Answer 1

window.location.hash = element.id  // here is the element id

如果您不想滚动到该元素，则可以这样

history.pushState({}, "", element.id)

您可以像这样更新您的位置哈希。

如果你不知道如何获取元素id，可以使用IntersectionObserver

这一切都可以在没有钩子的情况下完成

Answer 2

对于下载功能，您可以将以下功能添加到您的代码中：

const handleDownload = () => {
  const currentSection = window.location.hash.substr(1);
  const element = document.getElementById(currentSection);
};