1

更新 2：已解决。这是由于造型不佳。我的应用程序中有一个背景 div，我设置了溢出：自动；它正在阻止 react-scroll 工作。它甚至不需要。我删除了它，它解决了问题。

更新：我认为更清楚是个好主意，所以我将我的项目复制到一个代码沙箱中。我在沙盒中仍然遇到同样的问题。如果有人能看到任何问题，我肯定希望得到您的帮助。

我正在尝试创建我的第一个投资组合页面。

当我单击 Nav 组件中指向其他组件的链接时，我试图实现平滑滚动，例如这个 About 组件。我正在使用反应滚动。

这是我的 Nav.js 组件。

import { Link } from "react-scroll";

const NavBar = () => {

  return (
      <div className={`${classes.navbar} ${navBarDarkLightClasses}`}>
        <Link to="about" spy={true} smooth={true} offset={50} duration={500}>
          About
        </Link>
      </div>
  );
};

export default NavBar;

这是我要链接到的 About.js 组件。

const About = () => {
  return (
    <section>
      <div id="about" className={classes.image}>
        <img src={profilePhoto} alt="profile photo"/>
      </div>
    </section>
  );
};

export default About;

然而。什么都没发生。当我在浏览器中查看 html 时，链接显示为 About 并且不包含我期望的 href。

非常感谢任何帮助。

4

2 回答 2

0

据我所知，您的代码没有任何问题。但是，您的课程和/或样式可能存在一些问题。

呈现的链接不应该有任何href。Link 组件应该在没有它的情况下处理滚动。

您可以根据您提供的代码查看此工作示例沙箱。然后，也许，您可以快速找出代码的问题。

于 2022-02-05T12:06:48.367 回答
0

变化：

  • import React from "react";被添加到文件的顶部
  • 组件应导入 App.js

例子：

{root-dir}/components/navBar.js：

import React from "react";
import { Link } from "react-scroll";

const NavBar = () => {
  return (
    <div>
      <Link to="about" spy={true} smooth={true} offset={50} duration={500}>
        About
      </Link>
    </div>
  );
};

export default NavBar;

{root-dir}/components/aboutSection.js：

import React from "react";

const About = () => {
  return (
    <section>
      <div id="about">
        <img src={profilePhoto} alt="profile photo"/>
      </div>
    </section>
  );
};

export default About;

App.js：

import React, { Component } from "react";
import NavBar from "./components/navBar";
import About from "./components/aboutSection";

export default class App extends Component {
  render() {
    return (
      <>
        <NavBar />
        <About />
      </>
    );
  }
}
于 2022-02-05T12:05:36.467 回答