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

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

关注
发信
关注(28)粉丝(399)

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

本文介绍了反应滚动|单击导航栏链接时如何滚动到特定的目标组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

 import React, { Component } from "react";import { Link, animateScroll as scroll } from react-scroll";类导航栏扩展组件{使成为() {返回 (<nav className="navbar navbar-expand-lg navbar-dark"><Link className="navbar-brand";到=/">CMD <span>自定义电影数据库</span></链接><按钮className =导航栏切换器"类型=按钮"数据切换=折叠"数据目标=#navbarNav"；aria-controls="navbarNav";aria-expanded="false";aria-label="切换导航";><span className="navbar-toggler-icon";/><div className="collapse navbar-collapse";id="navbarNav"><ul className="navbar-nav"><li className="nav-item "><链接className =导航链接"；到=/"间谍={真}平滑={真}偏移={-70}持续时间={500}>家</链接><li className="nav-item"><链接className =导航链接"；到=/"间谍={真}平滑={真}偏移={-70}持续时间={500}>搜索</链接><li className="nav-item"><链接className =导航链接"；到=/"间谍={真}平滑={真}偏移={-70}持续时间={500}>类别</链接><li className="nav-item"><链接className =导航链接"；到=/"间谍={真}平滑={真}偏移={-70}持续时间={500}>受欢迎的</链接><li className="nav-item"><链接className =导航链接"；到=/"间谍={真}平滑={真}偏移={-70}持续时间={500}>预告片</链接><li className="nav-item"><链接className =导航链接"；到=/"间谍={真}平滑={真}偏移={-70}持续时间={500}>文章</链接><li className="nav-item"><链接className =导航链接"；到=/"间谍={真}平滑={真}偏移={-70}持续时间={500}>接触</链接>

</nav>);}}导出默认导航栏；

这是添加了所有组件的 Home 组件

 class Home 扩展 React.Component {使成为() {返回 (<React.Fragment><导航栏/><展示/><FormWrapper/><类别列表/><电影网格/><电影预告片/><文章网格/><页脚/></React.Fragment>);}}
解决方案

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

只要我需要一个滚动到某个元素的 Link，我就会导入该链接，定义它，然后渲染它:

import React, { Component } from 'react'从反应滚动"导入滚动const ScrollLink = Scroll.ScrollLink类导航栏扩展组件{使成为() {返回 (<导航><滚动链接to=示例目的地"间谍={真}平滑={真}持续时间={500}班级名称='某个班级'activeClass='some-active-class'>链接文本在这里</ScrollLink></nav>)}导出默认导航栏；


在一个单独的文件中，我们定义了 `Link` 将滚动到的目的地.来自 react-scroll 的 `Element` 导入使这变得非常简单！

import React, { Component } from 'react'从反应滚动"导入{元素}导出默认函数 () {返回 (<React.Fragment><Element id='example-destination' name='example-destination'>//将您的内容包装在 react-scroll 的 Element 中</元素></React.Fragment>)}

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

I am making a single scroller page using React and want to navigate to a specific section of the page. In HTML we use an href and anchor tag to achieve this interaction.

I found a React library called react-scroll but I do not know how to link each component in different folders from the a link in the NavBar component. My NavBar has multiple links for scrolling to a section/ component. Any help would really be appreciated!

  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;

This is Home Component where all component is added

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

react-scroll is a great library - let me try and explain how I understand it.

Wherever I need a Link that scrolls to a certain element, I import that link, define it, and render it:

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;


In a separate file, we define the destination that the `Link` will scroll to. The `Element` import from react-scroll makes this pretty easy!

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>
  )
}

Making sense? Let me know if I can expand on this further!

这篇关于反应滚动|单击导航栏链接时如何滚动到特定的目标组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-31 03:56
Powered by LMLPHP ©2024 单击导航栏链接时如何滚动到特定的目标组件 0.036625