[英]Active class for react-scroll, isn't working properly
当我运行我的页面并滚动到<Element></Element>
时,活动类没有显示,也没有在 DOM 中呈现
我在某处读到你必须调用几年前发布的scrollSpy.update()
。 但是,仍然无法正常工作。
我正在关注文档实施
这是我的代码...
import React, { useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import styles from "./navbar.module.css";
import { Link, Element } from "react-scroll";
import * as Scroll from "react-scroll";
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1
},
menuButton: {
marginRight: theme.spacing(2)
},
title: {
flexGrow: 1
}
}));
export default function ButtonAppBar(props) {
let scrollSpy = Scroll.scrollSpy;
const classes = useStyles();
useEffect(() => {
scrollSpy.update();
});
return (
<div className={classes.root}>
<AppBar style={{ backgroundColor: "#343567" }} position="fixed">
<Toolbar>
<Typography variant="h6" className={classes.title}>
Welcome
</Typography>
<Link
activeClass="active"
to="test1"
spy={true}
smooth={true}
offset={-70}
duration={800}
>
Test 1
</Link>
<Link
activeClass="active"
to="test2"
spy={true}
smooth={true}
offset={-70}
duration={800}
>
Test 2
</Link>
<Link
activeClass="active"
to="test3"
spy={true}
smooth={true}
offset={-70}
duration={800}
>
Test 3
</Link>
<Link
activeClass="active"
to="test4"
spy={true}
smooth={true}
offset={-70}
duration={800}
>
Test 4
</Link>
</Toolbar>
</AppBar>
</div>
);
}
这是为了便于访问而滚动到的元素。
<Element name="test1" className="element">
test 1
</Element>
<Element name="test2" className="element">
test 2
</Element>
<Element name="test3" className="element">
test 1
</Element>
<Element name="test4" className="element">
test 2
</Element>
我想,你忘记了这一点。
import { Link, Element } from "react-scroll";
希望是帮助。
您需要将元素设置为 'id' 而不是 'name'
例如:
<Element id="test1" className="element">
test 1
</Element>
<Element id="test2" className="element">
test 2
</Element>
<Element id="test3" className="element">
test 1
</Element>
<Element id="test4" className="element">
test 2
</Element>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.