在Gatsby.js中实现点击锚点切换Active类的技术求助

嘿，我来帮你搞定这个Active类切换的问题！在Gatsby（本质是React项目）里，咱们最好用React的状态管理来处理这类交互，而不是直接用原生JS操作DOM——毕竟React的虚拟DOM机制和直接操作DOM不太搭，容易出现状态不同步的问题。结合你正在用的styled-components，咱们可以这样实现：

1. 基础单链接激活切换 #

首先，用React的useState钩子跟踪链接的激活状态，再把状态传递给styled组件来动态调整样式：

import { useState } from 'react';
import styled from 'styled-components';

// 定义支持active属性的styled链接组件
const MenuLink = styled.a`
  position: absolute;
  cursor: pointer;
  padding: 10px 35px 16px;
  /* 你的基础样式 */
  color: #333;
  text-decoration: none;
  transition: all 0.3s ease;

  /* 根据active属性切换激活样式 */
  ${props => props.active && `
    color: #ff4081;
    border-bottom: 2px solid #ff4081;
    /* 这里添加你需要的激活态样式 */
  `}
`;

// 导航项组件
const NavItem = ({ children }) => {
  // 初始化激活状态为false
  const [isActive, setIsActive] = useState(false);

  // 点击时切换状态
  const handleToggleActive = () => {
    setIsActive(prevState => !prevState);
  };

  return (
    <MenuLink
      active={isActive}
      onClick={handleToggleActive}
      {/* 如果是Gatsby内部路由，建议换成<Link>组件，导入方式：import { Link } from 'gatsby' */}
    >
      <span>{children}</span>
    </MenuLink>
  );
};

export default NavItem;

2. 多链接互斥激活（导航栏场景） #

如果是导航栏多个链接，需要点击时只有当前链接激活，只需要把状态改成存储当前激活的链接ID即可：

import { useState } from 'react';
import styled from 'styled-components';
import { Link } from 'gatsby'; // 内部路由推荐用Gatsby的Link

const MenuLink = styled(Link)`
  position: relative;
  cursor: pointer;
  padding: 10px 35px 16px;
  color: #333;
  text-decoration: none;
  margin-right: 20px;

  ${props => props.active && `
    color: #ff4081;
    border-bottom: 2px solid #ff4081;
  `}
`;

const NavBar = () => {
  // 用状态存储当前激活的链接ID，初始可设为第一个链接ID或null
  const [activeLinkId, setActiveLinkId] = useState('home');

  // 导航项列表
  const navLinks = [
    { id: 'home', label: '首页', to: '/' },
    { id: 'about', label: '关于', to: '/about' },
    { id: 'blog', label: '博客', to: '/blog' }
  ];

  return (
    <nav style={{ display: 'flex' }}>
      {navLinks.map(link => (
        <MenuLink
          key={link.id}
          to={link.to}
          active={activeLinkId === link.id}
          onClick={() => setActiveLinkId(link.id)}
        >
          <span>{link.label}</span>
        </MenuLink>
      ))}
    </nav>
  );
};

export default NavBar;

为什么原生JS不行？ #

React会通过虚拟DOM管理页面渲染，你用原生JS直接修改DOM的类名，会被React后续的渲染覆盖，导致状态不同步。用React的状态管理+styled-components的props传值，才是符合React生态的正确做法哦～

内容的提问来源于stack exchange，提问作者Anders Kitson