javascript - React Hooks 滚动到元素
问题描述
我正在寻找使用 React 16.8.6 编写一个 React 钩子,它可以让我在单击导航项时滚动到特定的 HTML 元素部分。我有一个Navigation
组件是页面上呈现的部分的兄弟。
此外,当页面滚动时,我想App
用那个 HTML 部分更新状态。
导航组件 JSX
<ul class="nav>
<li><a>Section 1</a></li>
<li><a>Section 2</a></li>
</ul>
应用级组件主页中的部分
<section className="section-1">Section 1</section>
<section className="section-2">Section 2</section>
挂钩
const [navItem, setNavItem] = React.useState(null);
const sectionRef = React.useRef(null);
// Scroll To Item
useEffect(() => {
console.log(sectionRef.current);
if (sectionRef.current) {
sectionRef.current.scrollToItem();
}
}, []);
解决方案
如果您不介意使用react-router-dom
,那么您可以跟踪历史更改并id
通过历史更改将滚动位置更新为 HTML 元素hash
。这种方法的优点是您不必使用状态,也不必使用 refs,它可以在整个应用程序中扩展(无论元素位于应用程序树中的哪个位置,您都可以滚动到它们)。
工作示例:
https://fglet.codesandbox.io/(演示)
https://codesandbox.io/s/fglet(来源——不幸的是,在代码和框编辑器中不起作用)
components/ScrollHandler(监听哈希历史变化的钩子,搜索与哈希中的 id 匹配的元素,如果找到匹配的元素 id,则滚动到该元素)
import { useEffect } from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router-dom";
const ScrollHandler = ({ location }) => {
useEffect(() => {
const element = document.getElementById(location.hash));
setTimeout(() => {
window.scrollTo({
behavior: element ? "smooth" : "auto",
top: element ? element.offsetTop : 0
});
}, 100);
}, [location]);
return null;
};
ScrollHandler.propTypes = {
location: PropTypes.shape({
pathname: PropTypes.string,
search: PropTypes.string,
hash: PropTypes.string,
state: PropTypes.any,
key: PropTypes.string
}).isRequired
};
export default withRouter(ScrollHandler);
组件/导航(更改 url 哈希历史位置的链接)
import React from "react";
import { Link } from "react-router-dom";
import List from "../List";
const Navigation = () => (
<List>
{[1, 2, 3, 4, 5].map(num => (
<li key={num}>
<Link to={`/#section${num}`}>Section {num}</Link>
</li>
))}
</List>
);
export default Navigation;
组件/部分(Headline
组件包含id
将匹配的组件)
import React from "react";
import Headline from "../Headline";
const Sections = () =>
[1, 2, 3, 4, 5].map(num => (
<Headline key={num} id={`#section${num}`}>
Section {num}
</Headline>
));
export default Sections;
index.js
import React from "react";
import { render } from "react-dom";
import { BrowserRouter } from "react-router-dom";
import Container from "./components/Container";
import Navigation from "./components/Navigation";
import Sections from "./components/Sections";
import ScrollHandler from "./components/ScrollHandler";
import "./styles.css";
const App = () => (
<BrowserRouter>
<Container>
<ScrollHandler />
<Navigation />
<Sections />
</Container>
</BrowserRouter>
);
render(<App />, document.getElementById("root"));
推荐阅读
- c++ - 将基类指针转换为派生类指针
- ngrok - ngrok-公共网址在哪里
- scala - 将 Scio 类型的 bigquery api 与 apache-beam 一起使用时编译管道时出错
- c# - 无法将 system.windows.forms.messageboxbuttons 转换为 system.windows.messageboxbuttons
- scip - `SCIP_EVENTTYPE_NODESOLVED` 包含的事件是什么意思?
- php - 子句“/quiet 和 /norestart 命令行开关”是什么意思?
- arrays - 如何映射深度嵌套的数组对象?
- javascript - 如何在 REACT 中从另一个类调用一个类中的函数
- html - 语义 UI 中的边框类
- cupy - 了解 cp.RawKernel 中的网格和块