Javascript 在带有Chakra.ui的单页react应用程序中向当前页面部分添加下划线

我正在使用Chakra.ui组件库构建一个单页react网站。但是，我有不同的页面部分，您可以从页眉跳转到。我需要它，这样当你在某一页的部分，该部分是在标题下划线。我尝试过许多不同的方法，但似乎都不管用

“我的标题”部分的代码：

import React, { useState } from "react";
//import { Link } from "react-router-dom";
import { Link, animateScroll as scroll } from "react-scroll";
import { Box, Flex, Text, Button } from "@chakra-ui/react";
import Logo from "../ui/Logo";
import { LinkBox, LinkOverlay } from "@chakra-ui/react";
import { NavLink } from "react-router-dom";


const MenuItem = ({ children, isLast, to = "/", ...rest }) => {
  return (
    <LinkBox
      width="auto"
      height="75px"
      marginTop={["auto", "auto", "auto", "25px"]}
      marginRight="10px"

      borderBottom={
        (window.location.href.split("#")[1] || "") == to
          ? "3px solid #333"
          : "transparent"
      }
      borderColor={
        (window.location.href.split("#")[1] || "") == to
          ? "primary.100"
          : "none"
      }

      _hover={{
        borderBottom: "3px solid #333",
        borderBottomColor: "primary.100",
      }}
    >
      <LinkOverlay href={to}>
        <Box
          width="auto"
          height={to == "#/donate" ? "auto" : "50px"}
          marginRight="10px"
          marginLeft="10px"
 
          borderRadius={to == "#/donate" ? "50px" : "none"}
          bg={to == "#/donate" ? "primary.100" : "none"}
          padding={to == "#/donate" ? "10px" : "none"}

        >
          <Text

            marginRight="5px"
            marginLeft="5px"
            display="block"
            fontSize="2xl"
            fontWeight
            lineHeight={to == "#/donate" ? "auto" : "55px"}
            align="center"
            textColor={to == "#/donate" ? "primary.200" : "primary.100"}
            {...rest}
          >
            {children}
          </Text>
        </Box>
      </LinkOverlay>
    </LinkBox>
  );
};

const CloseIcon = () => (
  <svg width="24" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
    <title>Close</title>
    <path
      fill="white"
      d="M9.00023 7.58599L13.9502 2.63599L15.3642 4.04999L10.4142 8.99999L15.3642 13.95L13.9502 15.364L9.00023 10.414L4.05023 15.364L2.63623 13.95L7.58623 8.99999L2.63623 4.04999L4.05023 2.63599L9.00023 7.58599Z"
    />
  </svg>
);

const MenuIcon = () => (
  <svg
    width="24px"
    viewBox="0 0 20 20"
    xmlns="http://www.w3.org/2000/svg"
    fill="white"
  >
    <title>Menu</title>
    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
  </svg>
);

const Header = (props) => {
  const [show, setShow] = React.useState(false);
  const toggleMenu = () => setShow(!show);

  return (
    <Flex
      as="nav"
      align="center"
      justify="space-between"
      height={show ? "none" : "100px"}
      wrap="wrap"
      w="100%"
      p={3}
      bg={["primary.200", "primary.200", "primary.200", "primary.200"]}
      color={["white", "white", "white", "white"]}
      {...props}
    >
      <Flex align="center">
        <Logo
          w="85px"
          color={["white", "white", "primary.500", "primary.500"]}
        />

        <Text

          marginLeft="20px"
          display="block"
          fontSize="2xl"
          fontWeight
          lineHeight="55px"
          align="center"
          textColor="primary.100"
        >
          YBDC
        </Text>
      </Flex>

      <Box display={{ base: "block", md: "none" }} onClick={toggleMenu}>
        {show ? <CloseIcon /> : <MenuIcon />}
      </Box>

      <Box
        display={{ base: show ? "block" : "none", md: "block" }}
        flexBasis={{ base: "100%", md: "auto" }}
      >
        <Flex
          align="center"
          justify={["center", "space-between", "flex-end", "flex-end"]}
          direction={["column", "row", "row", "row"]}
          pt={[4, 4, 0, 0]}
          ml="10"
          mr="10"
        >
          <MenuItem to="/">HOME</MenuItem>
          <MenuItem to="#/about">ABOUT </MenuItem>
          <MenuItem to="#/impact">IMPACT </MenuItem>
          <MenuItem to="#/volunteer">VOLUNTEER</MenuItem>
          <MenuItem to="#/donate" isLast>
            DONATE
          </MenuItem>
        </Flex>
      </Box>
    </Flex>
  );
};

export default Header;

import React，{useState}来自“React”；
//从“react router dom”导入{Link}；
从“反应滚动”导入{Link，animateScroll as scroll}；
从“@chakra ui/react”导入{Box，Flex，Text，Button}”；
从“./ui/Logo”导入徽标；
从“@chakra ui/react”导入{LinkBox，LinkOverlay}”；
从“react router dom”导入{NavLink}；
const MenuItem=（{children，isLast，to=“/”，…rest}）=>{
返回(
{儿童}
);
};
const CloseIcon=（）=>(
接近
);
const MenuIcon=（）=>(
菜单
);
常数头=（道具）=>{
const[show，setShow]=React.useState（false）；
const-toggleMenu=（）=>setShow（！show）；
返回(
YBDC
{显示？：}
家
关于
影响
志愿者
捐赠
);
};
导出默认标题；

---

谢谢。

据我所知，脉轮UI没有当前/活动链接的内置功能。这给我们留下了两个选择：实现自定义逻辑和使用其他库

两种方法中最简单的一种是使用已有此功能的react scroll库

import { Link as ScrollLink } from 'react-scroll';

然后在任何你想要的地方使用它，就像这样：

<ScrollLink
    to='home'
    activeClass="active"
    spy={true}
    smooth={true}
    offset={0}
    duration={1500}>
Home
</ScrollLink >

家

---

to

prop引用的是要滚动到的元素的ID，因此在我的示例中，它将是ID为

#home

的元素。确保通过

spy={true}

prop和

activeClass=“yourclassname”

。您以后可以使用这个类名来设置标题的活动链接的样式<代码>偏移量prop定义类与元素的距离。最后，

duration

prop定义滚动动画将持续多长时间。

Ah我明白了。在哪里以及如何使用类名“active”进行样式设置？我必须为此制作CSS文件吗？或者在我的代码中有没有一种方法可以做到这一点？另外，在您的示例中，ScrollLink是否必须封装整个部分？或者这只是指向该部分的链接？如果你的代码中有全局CSS样式，我会在那里实现“active”类。为此，您还需要向ScrollLink添加一个自定义类。假设我的ScrollLink有一个类名“myLink”，这意味着无论何时此链接处于活动状态，我都可以在CSS中将其引用为

.myLink.active

。因此，您可以在CSS中执行类似于

.myLink.active{color:'blue'}

的操作。我尝试在Chakra UI的

sx

道具中实现相同的逻辑，但无法使其正常工作。所以CSS是唯一的方法。虽然你可以在ScrollLink中封装整个元素，但是没有必要这样做。ScrollLink表示

a

标记，因此ScrollLink的InnerHTML是将要显示的文本