相关疑难解决方法(0)

反应滚动| 单击导航栏链接时如何滚动到特定的目标组件

我正在使用 React 制作单个滚动页面,并希望导航到页面的特定部分。在 HTML 中,我们使用 href 和锚标记来实现这种交互。

我找到了一个名为 react-scroll 的 React 库,但我不知道如何从 NavBar 组件中的 a 链接链接不同文件夹中的每个组件。我的 NavBar 有多个链接用于滚动到一个部分/组件。任何帮助将不胜感激!

  import React, { Component } from "react";
  import { Link, animateScroll as scroll } from "react-scroll";
  class Navbar extends Component {

    render() {
      return (
        <nav className="navbar navbar-expand-lg navbar-dark">
          <Link className="navbar-brand" to="/">
            CMD <span>Custom Movie Database</span>
          </Link>
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon" />
          </button>
          <div className="collapse navbar-collapse" id="navbarNav">
            <ul className="navbar-nav">
              <li className="nav-item ">
                <Link
                  className="nav-link" …
Run Code Online (Sandbox Code Playgroud)

scroll reactjs anchor-scroll react-router-dom react-scroll

5
推荐指数
2
解决办法
1万
查看次数