0

我正在使用 Chakra.ui 组件库构建一个单页反应网站。但是，我确实有不同的页面部分，您可以从标题跳转到。我需要它，以便当您在某个页面部分时，该部分在标题中带有下划线。我尝试了许多不同的方法，但它们似乎都不起作用。

我的标题部分的代码：

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;

谢谢。

4

1 回答 1

0

据我所知，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 >

toprop 引用您要滚动到的元素的 ID，因此在我的示例中，它将是 ID 的元素#home。确保通过spy={true}prop 和activeClass="yourclassname". 您可以稍后使用这个 className 来设置标题的活动链接。offsetprop 定义了类将被切换的距离元素多近或多远。最后，durationprop 定义了滚动动画将持续多长时间。

于 2021-05-08T06:03:55.873 回答