简介
@reach/descendants 是一个 React 插件，它提供了一种方式来访问指定组件（或元素）的所有后代。与 React 的 Ref 使用方式不同的是，@reach/descendants 允许您轻松地访问和操作任何一个具有指定选择器的后代，而不需要了解组件树结构。
安装
你可以通过 npm 安装 @reach/descendants：
npm install @reach/descendants
用法
首先，您需要将其导入到 React 组件中：
import { DescendantProvider, useDescendants } from '@reach/descendants';这个插件提供了两个主要的 React Hook，分别是 DescendantProvider 和 useDescendants。
DescendantProvider
首先在您的 React 组件中定义一个 DescendantProvider 组件，并使用它来包装需要访问后代的组件（或元素）, 这个组件必须包含一个名为 data-descendant 的 prop，这个 prop 的值将会被与后代元素的 selectors 匹配到，以便在后面的步骤中进行查找。
<DescendantProvider>
<div data-descendant="my-selector">
// 其他组件 / 元素
</div>
</DescendantProvider>useDescendants
使用 useDescendants Hook 来查找 DescendantProvider 下的后代，它将返回一个数组，包含所有匹配指定选择器的后代。
const [descendants, setDescendants] = useDescendants({
selector: 'my-selector',
});Descendant
descendants 数组是由 Descendant 对象组成的，其中每个 Descendant 包含了它所对应的匹配选择器的后代元素的所有属性，例如：位置、大小、标签等。您可以使用这些属性来操作后代元素，如：改变他的样式、位置等。
示例代码
下面是一个示例，包含了在一个 TreeView 组件中使用 @reach/descendants。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------------- -------------- - ---- ---------------------
------ -------- ---------- ---- -- -
----- ---------- ------------ - ---------------------
----- ------------- --------------- - ----------------
--------- -------------------
---
-- -- -------- ------- -------- --
----- --------------- - ------- -- -
-- -------------------------------------- -
------------------
-
--
------ -
--------------------
---- -------------- --------------------------
---------------- -- -
---------
-------------
-----------
-------------------------
-------------------
-------------------------
--
---
------
---------------------
--
-
-- -------- ------ ---- - ------------------------ -------------- - ---- -----
-------- ---------- ----- ------------ --------- ----------- -- -
----- --------- ----------- - ----------------------
----- -------------- - -------------------
------------------ -- -
------------------------------------------------
-- ------------------
----- ------------- - -- -- -
---------------------
--
----- --------------- - ------- -- -
-- ---------- --- -------- -
---------------------
-
--
------ -
----
--------------
--------------------
---------- -- ------------------
----------- -- -----------------
-----------------------
---------------------------
-------------
-
----
--------
------------ ------------- - ------
---------------- ------- - ----------- - ----------
----------- -------- --- ------- - ------ - ----------
--
-
-----------
------
------------------------- -- -
---------
-------------
-----------
-------------------------
-------------------
-------------------------
--
---
------
--
-以上就是使用 @reach/descendants 的简单示例，您可以使用这个 React 插件来处理类似于悬浮菜单、下拉框、树形结构等的组件实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f32a337dbf7be33b2566daf