react-scroll的活动类不能正常工作

Question

当我运行页面并滚动到<Element></Element>时，活动类没有显示，也没有在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";

希望就是帮助。

Answer 2

您需要将元素设置为“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>