如何解决使用 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 定义滚动动画将持续多长时间。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。