在前端开发中，我们经常需要将用户输入的数据进行筛选、过滤和排序，而且可能存在多种不同的筛选条件，这时一个查询构建器就能大大简化开发流程。React Query Builder Loom 就是一款开源的查询构建器组件，它可以让你轻松地创建一个交互式的查询构建器界面。
在本文中，我们将介绍如何使用 React Query Builder Loom npm 包，让你轻松创建一个查询构建器的交互界面，并提供了适用于各种场景和需求的示例代码。
开始使用 React Query Builder Loom
安装
使用 npm 安装：
npm install react-query-builder-loom
引入
下面是一个基本的使用方法：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ - ---- ---------------------------
----- ------ - -
- ------ ------ ------ ----- ----------- --
- ------ ----- ------ ----- ---------- --
- ------ ------ ----- ------ ---------- -------- --
- ------ ---------- ----- --------- --
- ------ -------- ----- -------- ---------- ----- --
--
----- --- - -- -- -
-----
------------- --------------- --
------
--
------ ------- ----在这个例子中，我们导入了 QueryBuilder 组件并指定了 fields 属性。fields 属性是一个数组，数组中的每个元素表示一个字段名称和用于显示字段的标签，以及可以用于过滤的输入类型（可选）。
事件处理
使用 QueryBuilder 组件时，你可以监听 onQueryChange 事件，当查询构建器中的条件发生变化时，该事件会触发。onQueryChange 返回一个查询对象，可以用于构建一个查询字符串或其他支持的数据格式：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ - ---- ---------------------------
----- ------ - -
- ------ ------ ------ ----- ----------- --
- ------ ----- ------ ----- ---------- --
- ------ ------ ----- ------ ---------- -------- --
- ------ ---------- ----- --------- --
- ------ -------- ----- -------- ---------- ----- --
--
----- --- - -- -- -
----- ----------------- - ----- -- -
-------------------
--
------ -
-----
------------- --------------- --------------------------------- --
------
--
--
------ ------- ----示例代码
下面是一些使用 React Query Builder Loom 的示例代码，你可以根据自己的需求进行修改和扩展。
嵌套组件
如果你需要构建一个嵌套的查询构建器，可以使用 <querybuilder> 组件作为子组件。下面是一个嵌套的查询构建器的例子，它可以添加多个查询条件，并且支持 AND 和 OR 连接条件：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------------ - ---- ---------------------------
----- ------ - -
- ------ ------ ------ ----- ----------- --
- ------ ----- ------ ----- ---------- --
- ------ ------ ----- ------ ---------- -------- --
- ------ ---------- ----- --------- --
- ------ -------- ----- -------- ---------- ----- --
--
----- ------------------ - -- ------- -------- - ----- -- -- -
----- ------- --------- - ----------
--- --------------------
------ ---
----------- ---------
---
----- ----------------- - ----- -- -
----------------
--
----- ------------- - -- -- -
----------
---------
------ -
---------------
-
--- --------------------
------ ---------------
------ ---
--------- --------
--
--
---
--
------ -
-----
------------- --------------- ------------- --------------------------------- --
------- --------------------------- ------------------
------
--
--
----- --- - -- -- -
------ -
-----
------------------- --------------- -------------- --
------
--
--
------ ------- ----显示结果列表
在某些情况下，你可能需要将查询条件应用到一个数据列表中，并显示过滤后的结果列表。下面是一个应用查询条件到静态数据列表中的例子：
-- -------------------- ---- -------
------ ------ - --------- ------- - ---- --------
------ - ------------ - ---- ---------------------------
----- ------ - -
- ------ ------ ------ ----- ----------- --
- ------ ----- ------ ----- ---------- --
- ------ ------ ----- ------ ---------- -------- --
- ------ ---------- ----- --------- --
- ------ -------- ----- -------- ---------- ----- --
--
----- -------- - -
-
--- --
---------- -------
--------- ------
---- ---
-------- ---- ---- ----
------ ---------------
--
-
--- --
---------- -------
--------- --------
---- ---
-------- ---- ----- -----
------ ---------------
--
-
--- --
---------- ------
--------- --------
---- ---
-------- ---- --- ----
------ ---------------
--
--
----- --------------- - -- ------ -------- -- -- -
----- ------------------ -------------------- - -------------------
---------- -- -
----- ------- - ----- -- ----------- -- ------------------ - - - ----------- - ---
--- ---- - --------------
--- ---- - - -- - - --------------- ---- -
----- ------ - -----------
---- - ---------------- -- -
----- ---------- - -------------------
------ ----------------- -
---- --------
------ ---------- --- -------------
---- -----------
------ ---------- --- -------------
---- -------
------ ---------- - -------------
---- --------------
------ ---------- -- -------------
---- ----------
------ ---------- - -------------
---- -----------------
------ ---------- -- -------------
---- -----------
------ ----------------------------------
---- --------------
------ -----------------------------------
--------
------ -----
-
---
-
--------------------------
-- ------- -----------
-- ------------------------ --- -- -
------ ------- --------------
-
------ -
-----
-------
-------
----
----------------------------------------- -- -
--- --------------------
---
-----
--------
-------
-------------------------- -- -
--- --------------
-------------------------------- ------- -- -
--- ----------------------
---
-----
---
--------
--------
------
--
--
----- ---------- - -- -- -
----- ------- --------- - ----------
------ ---
---
----- ----------------- - ----- -- -
----------------
--
------ -
-----
------------- --------------- ------------- --------------------------------- --
---------------- ------------- ------------------- --
------
--
--
----- --- - -- -- -
------ -
-----
----------- --
------
--
--
------ ------- ----在这个例子中，我们创建了一个 QueryResultList 组件，它接收查询条件和数据列表作为属性，用 useMemo 确保只有当条件或数据列表更改时才更新过滤后的列表，并在 JSX 中显示结果列表。ResultList 组件只是将 QueryBuilder 和 QueryResultList 组件组合在一起，并作为最终的应用程序呈现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cba81e8991b448da44f