React+Antd+Typescript：封装条件查询组件

以下是一个React组件的示例代码，该组件使用Ant Design和TypeScript封装了一个条件查询的功能。

import React, { useState } from 'react';
import { Input, Button, Form } from 'antd';
 
interface QueryParams {
  name?: string;
  age?: number;
}
 
interface ConditionalQueryProps {
  onQuery: (params: QueryParams) => void;
}
 
const ConditionalQuery: React.FC<ConditionalQueryProps> = ({ onQuery }) => {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
 
  const handleSubmit = () => {
    const params: QueryParams = {};
    if (name) params.name = name;
    if (age) params.age = age;
    onQuery(params);
  };
 
  return (
    <Form layout="inline">
      <Form.Item>
        <Input
          placeholder="Name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </Form.Item>
      <Form.Item>
        <Input
          placeholder="Age"
          type="number"
          value={age}
          onChange={(e) => setAge(parseInt(e.target.value, 10))}
        />
      </Form.Item>
      <Form.Item>
        <Button type="primary" onClick={handleSubmit}>
          Query
        </Button>
      </Form.Item>
    </Form>
  );
};
 
export default ConditionalQuery;

这段代码定义了一个ConditionalQuery组件，它接收一个onQuery回调函数作为prop，该函数用于执行查询操作。组件内部维护了两个状态变量name和age，这些状态变量与输入框绑定，并且在表单提交时，会根据输入框的值生成查询参数对象，然后调用onQuery函数进行查询。这个设计模式可以用于任何需要条件查询的场景，并且使得代码结构清晰，易于维护。