基于 antd 封装一个可配置的表单组件

import React from 'react';
import { Form, Input, Select } from 'antd';

const { Option } = Select;

const FormItem = Form.Item;

class CustomForm extends React.Component {
  render() {
    const { formConfig } = this.props;
    const { getFieldDecorator } = this.props.form;

    return (
      <Form>
        {formConfig.map((item) => (
          <FormItem key={item.id} label={item.label}>
            {getFieldDecorator(item.name, {
              initialValue: item.initialValue,
              rules: item.rules,
            })(
              item.type === 'input' ? (
                <Input placeholder={item.placeholder} />
              ) : (
                <Select placeholder={item.placeholder}>
                  {item.options.map((option) => (
                    <Option key={option.value} value={option.value}>
                      {option.label}
                    </Option>
                  ))}
                </Select>
              )
            )}
          </FormItem>
        ))}
      </Form>
    );
  }
}

export default Form.create()(CustomForm);

以上代码中，我们首先引入了 antd 中的 Form、Input 和 Select 组件，然后我们将 Form.Item 重命名为 FormItem，以方便我们在代码中使用。

接下来，我们定义了一个名为 CustomForm 的类组件，并在其 render 方法中使用了 Form 组件和 FormItem 组件来渲染表单。由于我们需要根据传入的配置项来渲染表单项，因此我们通过 map 方法将配置项数组中的每个配置项都渲染为一个 FormItem 组件。

在每个 FormItem 组件中，我们使用了 getFieldDecorator 方法来绑定表单项的值。其中，initialValue 属性表示表单项的初始值，rules 属性表示表单项校验规则。我们还需要根据表单项的类型来选择渲染 Input 组件或 Select 组件。

最后，我们调用了 Form.create() 方法来将 CustomForm 组件与 antd 的 Form 组件进行关联，以便我们可以使用 this.props.form 中提供的方法来操作表单。

具体使用：

import React from 'react';
import CustomForm from './CustomForm';

const formConfig = [
  {
    id: '1',
    label: '姓名',
    name: 'name',
    type: 'input',
    placeholder: '请输入姓名',
    rules: [{ required: true, message: '请输入姓名' }],
  },
  {
    id: '2',
    label: '性别',
    name: 'gender',
    type: 'select',
    placeholder: '请选择性别',
    options: [
      { label: '男', value: 'male' },
      { label: '女', value: 'female' },
    ],
    rules: [{ required: true, message: '请选择性别' }],
  },
  {
    id: '3',
    label: '年龄',
    name: 'age',
    type: 'input',
    placeholder: '请输入年龄',
    rules: [{ required: true, message: '请输入年龄' }],
  },
];

const FormPage = () => {
  return <CustomForm formConfig={formConfig} />;
};

export default FormPage;