大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

react-querybuilder

react-querybuilder 是一个完全可定制的 React 查询构建器组件，其包括一系列实用函数，用于从各种查询语言中（如 SQL、MongoDB 等）导入和导出。

react-querybuilder 具有以下特征：

合理的默认值：使用强大的开箱即用功能构建复杂的查询支持导入导出：在 SQL、MongoDB 和其他几种查询格式之间进行转换灵活可扩展：提供自定义组件以实现最大的灵活性，或使用 MUI、Bootstrap 等库的官方兼容性包之一样式灵活：支持调整默认样式，查询构建器中与默认样式的所有偏差，包括对元素的重新排序都是使用组件分配的标准类通过纯 CSS 实现

目前 react-querybuilder 在 Github 通过 MIT 协议开源，短短时间内已经有超过 1k 的 star、是一个值得关注的前端开源项目。

如何使用 react-querybuilder

要安装 react-querybuilder，可以使用 npm、Yarn、pnpm 或 Bun 等包管理器：

npm i react-querybuilder

创建查询生成器的最简单方法是渲染不带 props 的 QueryBuilder 组件，但是请务必导入官方样式表，该样式表有 .css 和 .scss 版本：

import {QueryBuilder} from 'react-querybuilder';import 'react-querybuilder/dist/query-builder.css';// 不带有任何 props 组件export default () => <QueryBuilder />;

以上代码示例虽然功能齐全，但不是很有用。 为了真正从查询构建器中获得价值，首先需要定义一组字段供用户选择，开发者可以通过 fields 属性将 fields 数组传递到查询构建器中。

在下面的查询生成器中，单击 “+ 规则” 按钮，然后单击字段选择器以查看字段选择。

import {QueryBuilder} from 'react-querybuilder';import 'react-querybuilder/dist/query-builder.css';const fields: Field[] = [ {name: 'firstName', label: 'First Name'}, {name: 'lastName', label: 'Last Name'},];// 通过fields属性指定可以选择的字段export default () => <QueryBuilder fields={fields} />;

开发者还可以监听和控制用户使用查询生成器执行的操作，比如使用 React Hook useState 设置一个状态变量，最终将其传递给其他组件、事件处理程序等。

import {useState} from 'react';import {Field, QueryBuilder, RuleGroupType} from 'react-querybuilder';import 'react-querybuilder/dist/query-builder.css';const fields: Field[] = [ {name: 'firstName', label: 'First Name'}, {name: 'lastName', label: 'Last Name'},];export default () => { // 指定规则 const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [ {field: 'firstName', operator: '=', value: 'Steve'}, {field: 'lastName', operator: '=', value: 'Vai'}, ], }); return <QueryBuilder fields={fields} query={query} onQueryChange={setQuery} />;};

如果要将查询对象转换为其他格式，例如： SQL、MongoDB 和 CEL，开发者可以使用 formatQuery 函数。 下面示例演示了将查询转换为其等效的 SQL 形式， 通过操作表单元素修改查询，SQL 将相应更新：

import {useState} from 'react';import {Field, formatQuery, QueryBuilder, RuleGroupType} from 'react-querybuilder';import 'react-querybuilder/dist/query-builder.css';const fields: Field[] = [ {name: 'firstName', label: 'First Name'}, {name: 'lastName', label: 'Last Name'},];// 通过 hooks 处理回调等逻辑export default () => { const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [ {field: 'firstName', operator: 'beginsWith', value: 'Stev'}, {field: 'lastName', operator: 'in', value: 'Vai,Vaughan'}, ], }); return ( <> <QueryBuilder fields={fields} query={query} onQueryChange={setQuery} /> <h4> SQL as result of <code>formatQuery(query, 'sql')</code>: </h4> <pre>{formatQuery(query, 'sql')}</pre> </> );};参考资料

https://github.com/react-querybuilder/react-querybuilder

https://react-querybuilder.js.org/docs/intro