react-query-builder查询构建器中文文档

官方包

https://www.npmjs.com/package/react-querybuilder

官方演示

https://react-querybuilder.js.org/demo/antd

网友经验

https://www.cnblogs.com/niyan/p/17414642.html

import React from 'react';

import QueryBuilder from 'react-query-builder';

const fields = [

 { name: 'firstName', label: 'First Name', type: 'string' },

 { name: 'lastName', label: 'Last Name', type: 'string' },

 { name: 'age', label: 'Age', type: 'number' },

 { name: 'gender', label: 'Gender', type: 'select', options: ['Male', 'Female'] },

];

 const operators = [

 { name: '=', label: '=' },

 { name: '!=', label: '!=' },

 { name: '<', label: '<' },

 { name: '>', label: '>' },

];

const QueryBuilderExample = () => {

 const [query, setQuery] = React.useState(null);

 const onQueryChange = (query) => {

  setQuery(query);

 };

 return (

  <QueryBuilder

   fields={fields}

   operators={operators}

   onQueryChange={onQueryChange}

  />

 );

}; 

export default QueryBuilderExample;