phpquerybuilder技巧_reactquerybuilder新一代热门 React 查询构建器

文章目录 [+]

react-querybuilder

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

phpquerybuilder技巧_reactquerybuilder新一代热门 React 查询构建器

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