介绍
@daveobriencouk/react-scrollable-anchor 是一个 React 组件，它可以让你的页面滚动到指定的锚点位置。它使用了 Intersection Observer API 实现，可以在性能方面有较好的表现。
安装
你可以使用 npm 或 yarn 安装这个包：
npm install @daveobriencouk/react-scrollable-anchor --save
或
yarn add @daveobriencouk/react-scrollable-anchor
使用
这个包提供了两个组件：ScrollableAnchor 和 AnchorLink。ScrollableAnchor 用于包含锚点，而 AnchorLink 用于链接到锚点。
ScrollableAnchor
使用 ScrollableAnchor 组件来包含你的页面内容，以便于链接到内部锚点。
import { ScrollableAnchor } from "@daveobriencouk/react-scrollable-anchor";
<ScrollableAnchor id={"section1"}>
<h1>Section 1</h1>
<p>Content for section 1 goes here...</p>
</ScrollableAnchor>AnchorLink
使用 AnchorLink 组件来链接到内部锚点。
import { AnchorLink } from "@daveobriencouk/react-scrollable-anchor";
<AnchorLink href="#section1">Go to section 1</AnchorLink>高级用法
自定义吸顶偏移量
你可以使用 offset 属性来自定义吸顶偏移量。
<ScrollableAnchor id={"section1"} offset={100}>
<h1>Section 1</h1>
<p>Content for section 1 goes here...</p>
</ScrollableAnchor>按需加载
如果你的页面内容很多，你可以使用 lazyRender 属性来实现按需加载。这样只有当 ScrollableAnchor 位于可见区域时，它的内容才会被渲染。
<ScrollableAnchor id={"section1"} lazyRender>
<h1>Section 1</h1>
<p>Content for section 1 goes here...</p>
</ScrollableAnchor>监听锚点进入和退出
你可以使用 onEnter 和 onLeave 属性来监听锚点进入和退出的事件。
<ScrollableAnchor
id={"section1"}
onEnter={handleChange}
onLeave={handleChange}
>
<h1>Section 1</h1>
<p>Content for section 1 goes here...</p>
</ScrollableAnchor>自定义元素类型
你可以使用 component 属性来自定义 ScrollableAnchor 和 AnchorLink 组件的 HTML 元素类型。
<ScrollableAnchor id={"section1"} component={"div"}>
<h1>Section 1</h1>
<p>Content for section 1 goes here...</p>
</ScrollableAnchor>
<AnchorLink href="#section1" component={"button"}>
Go to section 1
</AnchorLink>总结
@daveobriencouk/react-scrollable-anchor 是一个很实用的 React 组件，它可以让你的页面滚动到指定的锚点位置。本文介绍了如何安装和使用这个包，同时也分享了一些高级用法。希望这篇文章能够帮助你更好地使用这个组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558b881e8991b448d607f
