Quartz 4

解决 Ant Design Anchor 组件页面刷新问题

4 min read

明白了。让我们详细探讨一下如何通过修改 handleClick 函数来解决 Anchor 组件导致页面刷新的问题。以下是修改和优化后的博客内容，重点在于 handleClick 函数的处理。

解决 Ant Design Anchor 组件页面刷新问题：深入分析与修复

在前端开发中，我们经常会遇到各种奇怪的行为，其中 Ant Design 的 Anchor 组件在首次点击目录链接时导致页面刷新的问题就是一个经典例子。本文将详细探讨这个问题的原因，并提供修复方案，特别是对 handleClick 函数的重点优化。

问题背景

Ant Design 的 Anchor 组件用于在页面中创建目录链接，方便用户快速跳转到目标部分。然而，我们发现每当用户第一次点击目录链接时，页面会重新加载，而这种行为在之后的点击中不会再出现。显然，这不是我们期望的用户体验。

问题分析

经过调查，我们发现问题主要集中在 handleClick 函数中。以下是可能导致问题的原因：

  1. 默认行为
    默认的锚点链接行为会导致浏览器跳转到页面的锚点位置，从而引发页面刷新。

  2. 事件处理不当
    如果事件处理函数中没有正确处理默认行为，可能会导致页面刷新。

重点修复：优化 handleClick 函数

为了解决页面刷新问题，我们需要对 handleClick 函数进行优化。以下是优化前的 handleClick 函数：

const handleClick = (e, link) => {
  e.preventDefault();
  const targetId = link.href.split('#')[1];
  const targetElement = document.getElementById(targetId);
  if (targetElement) {
    window.scrollTo({
      top: targetElement.offsetTop,
      behavior: 'smooth',
    });
    setActiveLink(link.href);
  }
};

详细解读

  1. 阻止默认行为
    使用 e.preventDefault() 可以阻止浏览器的默认锚点跳转行为，这样我们可以完全控制滚动行为，避免页面刷新。

  2. 提取目标 ID
    const targetId = link.href.split('#')[1]; 通过分割 href 属性来提取锚点 ID。注意确保 href 的格式正确，并且在 link 对象中确实包含 href 属性。

  3. 平滑滚动
    window.scrollTo 方法用于滚动到目标元素的位置，behavior: 'smooth' 确保滚动过程平滑，提升用户体验。

  4. 更新活动链接
    setActiveLink(link.href); 用于更新活动链接的状态，确保当前选中的链接与页面滚动位置一致。

完整示例

import { useState } from 'react';
import { Anchor } from 'antd';
import PropTypes from 'prop-types';
 
const { Link } = Anchor;
 
const TableOfContents = ({ headings = [], getContainer, oneKEY }) => {
  const [activeLink, setActiveLink] = useState('');
 
  const handleClick = (e, link) => {
    e.preventDefault(); // 阻止默认的锚点跳转行为
    const targetId = link.href.split('#')[1];
    const targetElement = document.getElementById(targetId);
    if (targetElement) {
      window.scrollTo({
        top: targetElement.offsetTop,
        behavior: 'smooth',
      });
      setActiveLink(link.href); // 更新活动链接
    }
  };
 
  return (
    <Anchor
      getCurrentAnchor={() => activeLink}
      getContainer={getContainer}
      affix={false}
      onClick={handleClick} // 使用自定义的点击处理函数
    >
      {headings.map(heading => (
        <Link key={heading.id} href={`#${heading.id}`} title={heading.text}>
          {/* 递归渲染子项 */}
          {heading.children && heading.children.map(child => (
            <Link key={child.id} href={`#${child.id}`} title={child.text} />
          ))}
        </Link>
      ))}
    </Anchor>
  );
};
 
TableOfContents.propTypes = {
  headings: PropTypes.array.isRequired,
  getContainer: PropTypes.func.isRequired,
  oneKEY: PropTypes.object.isRequired
};
 
export default TableOfContents;

Graph View