javascript - react 滚动的事件类无法正常工作

Question

当我运行页面并滚动到 <Element></Element> 时，Active 类没有显示，也没有在 DOM 中呈现。

我在某处读到您必须调用 scrollSpy.update()那是几年前发布的。但是，仍然不起作用。

我正在关注 Docs实现

这是我的代码...

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>

Answer 1

我想，你忘了这一点。

import { Link, Element } from "react-scroll";

希望就是帮助。