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

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