npm 包 @reach/descendants 使用教程

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

简介

@reach/descendants 是一个 React 插件，它提供了一种方式来访问指定组件（或元素）的所有后代。与 React 的 Ref 使用方式不同的是，@reach/descendants 允许您轻松地访问和操作任何一个具有指定选择器的后代，而不需要了解组件树结构。

安装

你可以通过 npm 安装 @reach/descendants：

--- ------- ------------------

用法

首先，您需要将其导入到 React 组件中：

------ - ------------------- -------------- - ---- ---------------------

这个插件提供了两个主要的 React Hook，分别是 DescendantProvider 和 useDescendants。

DescendantProvider

首先在您的 React 组件中定义一个 DescendantProvider 组件，并使用它来包装需要访问后代的组件（或元素）, 这个组件必须包含一个名为 data-descendant 的 prop，这个 prop 的值将会被与后代元素的 selectors 匹配到，以便在后面的步骤中进行查找。

--------------------
  ---- ------------------------------
    -- ---- - --
  ------
---------------------

useDescendants

使用 useDescendants Hook 来查找 DescendantProvider 下的后代，它将返回一个数组，包含所有匹配指定选择器的后代。

----- ------------- --------------- - ----------------
  --------- --------------
---

Descendant

descendants 数组是由 Descendant 对象组成的，其中每个 Descendant 包含了它所对应的匹配选择器的后代元素的所有属性，例如：位置、大小、标签等。您可以使用这些属性来操作后代元素，如：改变他的样式、位置等。

示例代码

下面是一个示例，包含了在一个 TreeView 组件中使用 @reach/descendants。

------ ----- ---- --------
------ - ------------------- -------------- - ---- ---------------------

------ -------- ---------- ---- -- -
  ----- ---------- ------------ - ---------------------
  ----- ------------- --------------- - ----------------
    --------- -------------------
  ---

  -- -- -------- ------- -------- --
  ----- --------------- - ------- -- -
    -- -------------------------------------- -
      ------------------
    -
  --

  ------ -
    --------------------
      ---- -------------- --------------------------
        ---------------- -- -
          ---------
            -------------
            -----------
            -------------------------
            -------------------
            -------------------------
          --
        ---
      ------
    ---------------------
  --
-

-- -------- ------ ---- - ------------------------ -------------- - ---- -----
-------- ---------- ----- ------------ --------- ----------- -- -
  ----- --------- ----------- - ----------------------

  ----- -------------- - -------------------
  ------------------ -- -
    ------------------------------------------------
  -- ------------------

  ----- ------------- - -- -- -
    ---------------------
  --

  ----- --------------- - ------- -- -
    -- ---------- --- -------- -
      ---------------------
    -
  --

  ------ -
    ----
      --------------
      --------------------
      ---------- -- ------------------
      ----------- -- -----------------
      -----------------------
      ---------------------------
      -------------
    -
      ----
        --------
          ------------ ------------- - ------
          ---------------- ------- - ----------- - ----------
          ----------- -------- --- ------- - ------ - ----------
        --
      -
        -----------
      ------
      ------------------------- -- -
        ---------
          -------------
          -----------
          -------------------------
          -------------------
          -------------------------
        --
      ---
    ------
  --
-

以上就是使用 @reach/descendants 的简单示例，您可以使用这个 React 插件来处理类似于悬浮菜单、下拉框、树形结构等的组件实现。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f32a337dbf7be33b2566daf

阅读全文

猜你喜欢

  • npm 包 @skpm/nib-loader 使用教程

    在前端开发中，我们经常需要使用不同的工具来处理样式文件，提升项目的开发效率和代码可读性。本文将介绍一款名为 @skpm/nib-loader 的 npm 包，它能够帮助我们在 Sketch 插件开发中...

    4 年前
  • npm 包 @skpm/promise 使用教程

    前言 在前端开发中，我们经常会遇到需要异步执行任务的情况，比如请求数据、操作视图等。Promise 是一种常见的异步编程模式，可以简化我们的代码，并提高可读性和可维护性。

    4 年前
  • npm 包 @skpm/xcodeproj-loader 使用教程

    在前端开发中，我们经常需要使用一些工具来帮助我们提高开发效率，特别是在开发 macOS 扩展时，可能需要使用 Xcode 工具来进行开发，而尽管 Xcode 是一个强大的集成开发环境，但却很难与其他开...

    4 年前
  • npm 包 @skpm/fs 使用教程

    如果你是一名前端开发者，那么你一定使用过 Node.js 和 npm 这两个工具，用于管理依赖和构建开发环境。而在 macOS 平台上，还有一个强大的工具 Sketch，用于设计 UI 界面。

    4 年前
  • npm 包 @skpm/buffer 使用教程

    什么是 @skpm/buffer？ @skpm/buffer 是一个 Node.js 模块，它提供了一个高效和灵活的 Buffer 类型，使得开发者可以轻松地在 Node.js 环境中处理二进制数据。

    4 年前
  • npm 包 @skpm/path 使用教程

    在前端开发中，我们常常需要对路径进行操作，例如获取相对路径、获取绝对路径、路径拼接等。在 Node.js 中，有一个常用的模块 path 可以满足我们的需求。但是在 Sketch 开发中，官方提供的 ...

    4 年前
  • npm 包 sketch-utils 使用教程

    在前端设计中，Sketch 是非常流行的设计工具。Sketch Utils 是一个帮助前端开发者将 Sketch 与代码集成的 npm 库。本文将带你了解如何使用它来提高你的前端设计效率。

    4 年前
  • npm 包 @skpm/test-runner 使用教程

    前言 在前端开发中，自动化测试是非常重要的一环。而在 Sketch 插件开发中，自动化测试也同样重要。我们可以使用 npm 包 @skpm/test-runner 来运行 Sketch 插件自动化测试...

    4 年前
  • npm 包 sketch-polyfill-fetch 使用教程

    在前端的开发工作中，我们经常需要发送请求获取数据，这就需要用到浏览器原生的 fetch API。然而，有些浏览器无法支持 fetch API，这就需要我们使用 polyfill 去模拟实现该 API，...

    4 年前
  • npm 包 @skpm/builder 使用教程

    前言 前端开发人员想要编写 Sketch 插件，经常需要使用到 Sketch 插件开发工具包，即 Sketch Plugin Manager（skpm）。而对于 skpm 来说，@skpm/build...

    4 年前
  • npm 包 webpack-extraneous-file-cleanup-plugin 使用教程

    npm 包 webpack-extraneous-file-cleanup-plugin 使用教程 前言 在我们进行前端开发的过程中，往往会使用到 Webpack 来进行打包构建。

    4 年前
  • npm 包 color-studio 使用教程

    简介 在前端领域，CSS 的样式是非常重要的一部分，而其中颜色又是不可或缺的。但是在实际的开发过程中，有时候需要大量的调色和选择合适的颜色组合，这时候就需要使用到工具来帮助我们快速选择和调试颜色。

    4 年前
  • npm 包 cpf_cnpj 使用教程

    在前端开发中，常常需要使用到各种数据验证工具，其中之一就是 CPF 和 CNPJ 号码的验证。这两种号码是巴西人在生活中经常使用的，而且也可以用于各种商业活动。在 JavaScript 的开发中，我们...

    4 年前
  • npm 包 cast-array 使用教程

    什么是 cast-array cast-array 是一个 npm 包，它可以将 JavaScript 中的值转换成一个数组。如果你需要在你的项目中使用数组，但不想在每个位置手动检查它是否是一个数组，...

    4 年前
  • npm 包 creditcards-types 使用教程

    在现代化的互联网时代，电子支付已成为生活中不可或缺的一部分。对于前端开发人员来说，我们需要对支付页面进行开发和调试，这时需要考虑信用卡号码的验证。在这里，我们介绍一下 npm 包 creditcard...

    4 年前
  • npm包fast-luhn的使用教程

    前言 快捷算法（Fast Luhn Algorithm）是一种用于检查信用卡或账户号码是否有效的算法。npm包fast-luhn是一款实现了快捷算法的JavaScript包，可以帮助前端开发者快速验证...

    4 年前
  • npm 包 is-valid-month 使用教程

    在前端开发中，很多时候需要判断用户输入的月份是否有效。而 npm 包 is-valid-month 就提供了便捷的方法来进行这个判断。本文将介绍该 npm 包的使用教程，包含详细的代码示例、深入的讲解...

    4 年前
  • npm 包 expand-year 使用教程

    在前端开发中，我们常常需要用到日期相关的操作，包括但不限于格式化日期、计算日期间隔、比较日期等。对于年份的操作也同样重要，例如常见的年份加减、范围筛选等。而今天介绍的 npm 包 expand-yea...

    4 年前
  • npm 包 parse-year 使用教程

    介绍 在前端 web 开发中，经常需要对时间进行处理。其中，年份是时间中的重要组成部分。而 npm 包 parse-year 就是一个方便的工具，用于解析获取年份。

    4 年前
  • npm 包 creditcards 使用教程

    什么是 creditcards？ creditcards 是一个 JavaScript 库，用于验证和格式化信用卡号码、过期日期、CVV 码以及卡片类型。它可以在前端和后端使用，支持多种卡片类型，包括...

    4 年前

相关推荐

    暂无文章