单击导航栏链接时如何滚动到特定的目标组件 [英] How to scroll to a specific targeted component when clicking on Navbar Link
问题描述
我有多个组件,其中一个是导航栏中的组件,我有多个应该滚动到每个部分或组件的链接,在纯HTML中,我们使用href和anchor标签.但是在这里我找到了一个名为react-scroll的React库,但是问题是我不知道如何从Navbar组件中的Link链接到不同文件夹中的每个组件.任何帮助将不胜感激.
i have multiple components one of them is navbar component in this navbar i have multiple Link that should scroll to each section or component, in plain HTML we use href and anchor tag. but here i found a react library called react-scroll but the issue is i dont know how to link each component in defferent folders from the Link in Navbar 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
是一个很棒的库-让我尝试解释一下我的理解.
react-scroll
is a great library - let me try and explain how I understand it.
在需要滚动到某个元素的Link
的任何地方,我都会导入该链接,对其进行定义并进行渲染:
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;
在单独的文件中,我们定义Link
滚动到的目标.从react-scroll导入Element
使其非常容易!
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 further - hope this helps!
这篇关于单击导航栏链接时如何滚动到特定的目标组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!