反应滚动 |单击导航栏时如何滚动到特定的目标组件 Link
react-scroll | How to scroll to a specific targeted component when clicking on Navbar Link
我正在使用 React 制作单个滚动页面,并希望导航到页面的特定部分。 HTML 我们使用 href 和锚标签来实现这种交互。
我找到了一个名为 react-scroll 的 React 库,但我不知道如何 link 不同文件夹中的每个组件与 NavBar 组件中的 link。我的 NavBar 有多个 links 用于滚动到一个部分/组件。任何帮助将不胜感激!
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>
);
}
}
react-scroll
是一个很棒的图书馆 - 让我试着解释一下我是如何理解它的。
只要我需要滚动到某个元素的 Link
,我就会导入那个 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;
在一个单独的文件中,我们定义了 `Link` 将滚动到的目的地。从 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>
)
}
有道理吗?如果我可以进一步扩展,请告诉我!
其他选择:
在你想去的组件中输入一个 id:
<div id='some-id'>
</div>
之后,从任何地方调用:
const anchor = document.querySelector('#some-id')
anchor.scrollIntoView({ behavior: 'smooth', block: 'center' })
只是建立在 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>
我正在使用 React 制作单个滚动页面,并希望导航到页面的特定部分。 HTML 我们使用 href 和锚标签来实现这种交互。
我找到了一个名为 react-scroll 的 React 库,但我不知道如何 link 不同文件夹中的每个组件与 NavBar 组件中的 link。我的 NavBar 有多个 links 用于滚动到一个部分/组件。任何帮助将不胜感激!
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>
);
}
}
react-scroll
是一个很棒的图书馆 - 让我试着解释一下我是如何理解它的。
只要我需要滚动到某个元素的 Link
,我就会导入那个 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;
在一个单独的文件中,我们定义了 `Link` 将滚动到的目的地。从 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>
)
}
有道理吗?如果我可以进一步扩展,请告诉我!
其他选择:
在你想去的组件中输入一个 id:
<div id='some-id'>
</div>
之后,从任何地方调用:
const anchor = document.querySelector('#some-id')
anchor.scrollIntoView({ behavior: 'smooth', block: 'center' })
只是建立在 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>