The Query Builder component for React
React Query Builder
React Query Builder 是一个完全可定制的 React 查询构建器组件，同时包含一系列实用函数，支持从多种查询语言（如 SQL、MongoDB 等）导入以及向这些语言导出。演示地址为 这里。
完整文档请访问 react-querybuilder.js.org。
快速开始
要开始使用，导入主组件和默认样式表，然后在应用中渲染该组件：
import { QueryBuilder } from 'react-querybuilder';
import 'react-querybuilder/dist/query-builder.css'; // or .scss
export function App() {
const [query, setQuery] = useState({
combinator: 'and',
rules: [],
});
return <QueryBuilder defaultQuery={query} onQueryChange={setQuery} />;
}
如需更全面的介绍，请参阅主包 README，深入了解完整文档，或浏览示例项目。
Tip
要启用拖放功能，请使用 @react-querybuilder/dnd。
如需增强的日期/时间支持，请使用 @react-querybuilder/datetime。
要在规则中启用表达式，请使用 @react-querybuilder/expr。
如需规则引擎功能（if-then-else），请使用 @react-querybuilder/rules-engine。
有关从早期版本的 react-querybuilder 迁移的说明，请参阅版本迁移指南。要从 react-awesome-query-builder 迁移，请参阅RAQB 迁移指南。
兼容性包
除了主要的 react-querybuilder 包外，此仓库还托管了官方兼容性组件包，可用于多个流行的样式库，包括 Ant Design、Bootstrap、Bulma、Chakra UI、Fluent UI、Mantine、MUI、PrimeReact 和 Tremor。同时还提供了一个 React Native 组件。
开发
详见贡献指南。
致谢
本组件的开发灵感来源于以下项目：
贡献者 ✨
感谢以下各位的辛勤付出（表情符号说明）：
该项目遵循All Contributors规范。欢迎任何形式的贡献！
Anthony Sosso
💻 ⚠️
Andrés Reyes Monge
💻 ⚠️
Mary McGrath
💻 ⚠️
Robert Krause
💻 ⚠️
本项目遵循 all-contributors 规范。欢迎任何形式的贡献！