使用 Chakra.ui 在单页反应应用程序中向当前页面部分添加下划线

问题描述

我正在使用 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","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"]}
      color={["white","white","white"]}
      {...props}
    >
      <Flex align="center">
        <logo
          w="85px"
          color={["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"]}
          pt={[4,4,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;

谢谢。

解决方法

据我所知，Chakra 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 道具引用您要滚动到的元素的 ID，因此在我的示例中，它将是一个 ID 为 #home 的元素。确保传递 spy={true} 道具和 activeClass="yourclassname"。您可以稍后使用这个 className 来设置标题的活动链接的样式。 offset 属性定义了类将被切换到离元素多近或多远。最后，duration prop 定义滚动动画将持续多长时间。