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

Question

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

我找到了一个名为 react-scroll 的 React 库，但我不知道如何通过 NavBar 组件中的链接链接不同文件夹中的每个组件。我的 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"
                  to="/"
                  spy={true}
                  smooth={true}
                  offset={-70}
                  duration={500}
                >
                  Home
                </Link>
              </li>
              <li className="nav-item">
                <Link
                  className="nav-link"
                  to="/"
                  spy={true}
                  smooth={true}
                  offset={-70}
                  duration={500}
                >
                  Search
                </Link>
              </li>
              <li className="nav-item">
                <Link
                  className="nav-link"
                  to="/"
                  spy={true}
                  smooth={true}
                  offset={-70}
                  duration={500}
                >
                  Category
                </Link>
              </li>
              <li className="nav-item">
                <Link
                  className="nav-link"
                  to="/"
                  spy={true}
                  smooth={true}
                  offset={-70}
                  duration={500}
                >
                  Popular
                </Link>
              </li>
              <li className="nav-item">
                <Link
                  className="nav-link"
                  to="/"
                  spy={true}
                  smooth={true}
                  offset={-70}
                  duration={500}
                >
                  Trailer
                </Link>
              </li>
              <li className="nav-item">
                <Link
                  className="nav-link"
                  to="/"
                  spy={true}
                  smooth={true}
                  offset={-70}
                  duration={500}
                >
                  Article
                </Link>
              </li>
              <li className="nav-item">
                <Link
                  className="nav-link"
                  to="/"
                  spy={true}
                  smooth={true}
                  offset={-70}
                  duration={500}
                >
                  Contact
                </Link>
              </li>
            </ul>
          </div>
        </nav>
      );
    }
  }

  export default Navbar;

这是添加所有组件的主页组件

    class Home extends React.Component {
      render() {
        return (
          <React.Fragment>
            <Navbar />
            <Showcase />
            <FormWrapper />
            <CategoryList />
            <MovieGrid />
            <MovieTrailer />
            <ArticleGrid />
            <Footer />
          </React.Fragment>
        );
      }
    }

Answer 1

react-scroll 是一个很棒的库 - 让我试着解释一下我是如何理解它的。

每当我需要滚动到某个元素的Link 时，我都会导入该链接、定义它并渲染它：

import React, { Component } from 'react'
import Scroll from 'react-scroll'
const ScrollLink = Scroll.ScrollLink

class Navbar extends Component {

render() {
  return (
    <nav>
      <ScrollLink 
        to="example-destination" 
        spy={true} 
        smooth={true} 
        duration={500} 
        className='some-class' 
        activeClass='some-active-class'
      >
        Link Text Goes Here
      </ScrollLink>       
    </nav>
  )
}

export default Navbar;

在一个单独的文件中，我们定义了“链接”将滚动到的目标。从 react-scroll 导入的 `Element` 让这变得非常简单！

import React, { Component } from 'react'
import { Element } from 'react-scroll'

export default function () {
  return (
    <React.Fragment>
    
      <Element id='example-destination' name='example-destination'>
        // wrap your content in the Element from react-scroll
      </Element>

    </React.Fragment>
  )
}

有意义吗？如果我可以进一步扩展，请告诉我！

Answer 2

其他选择：

在你想去的组件里放一个id：

<div id='some-id'>
</div>

之后，从任何地方拨打电话：

const anchor = document.querySelector('#some-id')
anchor.scrollIntoView({ behavior: 'smooth', block: 'center' })

Answer 3

以 Diego Baranowski 的解决方案为基础。通过单击您的视图向下滚动到锚元素，为元素创建了 onClick 事件侦听器。工作得很好。我是新手，所以希望它不会违背 React 的概念。

  <div 
     style={{"cursor":"pointer"}} 
     onClick={() => {
     const anchor = document.querySelector('#reviews-link')
     anchor.scrollIntoView({ behavior: 'smooth', block: 'center' })
    }}
  >
    <Rating
      rating={rating}
      numReviews={numReviews}
    ></Rating>
  </div>