在前端开发中，我们时常需要实现一个元素跟随另一个元素一起移动的效果，这在制作带有侧边栏的网站时尤其常见。基于此需求，我们推荐使用 npm 包 react-anchoring-view。react-anchoring-view 提供了一种简便且易于控制的方法，可以实现两个或多个 DOM 元素间的位置对齐。
安装
要使用 react-anchoring-view，需要首先安装它。在终端中进入你的项目目录，然后运行以下命令进行安装：
npm install --save react-anchoring-view
使用方式
在你的 React 组件中，引入 react-anchoring-view：
import AnchoringView from 'react-anchoring-view';
从根本上来说，AnchoringView 能够让你把两个 DOM 元素（锚点元素）绑定在一起。在控制锚点时，你能够控制视图的位置、大小、发生何种变化等。
AnchoringView 通过一组 API 来提供稍有所需的功能：
anchorRef： 锚定视图 Ref。viewRef： 视图 Ref。onAnchorLayout函数： 返回锚定视图的布局信息。onViewLayout函数： 返回视图的布局信息。onViewPositionChange函数： 视图位置更改时应运行的函数。
使用示例
下面我们将使用一个示例来演示如何使用 react-anchoring-view 包。
首先，在你的项目目录中创建一个名为 App.js 的文件。例如：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------------- ---- ----------------- ------
----- --- ------- --------- -
------------------ -
-------------
---------- - -
---- -----
----- -----
--
-
------------------------ - ----------------- ----------- -- -
----- - ---- ---- - - ----------------
--------------- ---- ---- ---
--
-------- -
----- --- - ------ -- ------------ - --------
----- ------- - ---- -- ---------- - ------
------ -
---- -------- -------- ------- --------- ------- ------- ---
--------------
---------------
-----------------
----------------------------------------------------
-
------- -------------------------------- ------------
----------------
----
-------
-------------- -- ---------------
- -
--------- -----------
---- -------------- - ---
----- --------------- - ---
-
- --
-
-
- -- -------- -- --- -------
------
------
--
-
-可以看到，我们使用 <AnchoringView> 组件将一个 <button> 组件与另一个 <div> 元素（锚定视图）连接起来。
我们需要将 anchorRef 和 viewRef 分别指向我们想要连接的两个 DOM 元素：
const ref = anchor => (this.anchor = anchor); const viewRef = view => (this.view = view);
此处使用 ref 函数来引用这些元素。
接着，我们需要定义一个函数来在视图位置发生变化时处理视图位置。此处定义了 handleViewPositionChange 函数，该函数将计算出当前视图与按钮之间的距离：
handleViewPositionChange = (presenterLayout, viewLayout) => {
const { top, left } = presenterLayout;
this.setState({ top, left });
};最后，我们将视图与插入 <AnchoringView> 中的 <button> 相对定位，并在 <AnchoringView> 内呈现它。
最终的效果如下：
结论
通过阅读本文，您应该已经掌握了 react-anchoring-view 在 React 项目中使用的方法，能够轻松实现两个 DOM 元素间的位置对齐。这个简单的 npm 包能够在您的项目中实现更灵活的排版方式，为您带来方便与效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562be81e8991b448e0001