reactjs 的两种不同生成组件的方法，怎么互相转换

Question

const FormItem = Form.Item;
const CollectionCreateForm = Form.create()(
  (props) => {
    const { visible, onCancel, onCreate, form, getAddress} = props;
    const { getFieldDecorator } = form;
    return (
      <Modal
        visible={visible}
        title="添加实例"
        okText="确认"
        onCancel={onCancel}
        onOk={onCreate}
      >
        <Form layout="vertical">
          <FormItem label="实例名称">
            {getFieldDecorator('edgeName', {
              rules: [{ required: true, message: '实例名称必须填写!' }],
            })(
              <Input/>
            )}
          </FormItem>
          <FormItem label="地址">
            {getFieldDecorator('position', {
              rules: [{ required: true, message: '地址必须填写!' }],
            })(<Input/>)}
          </FormItem>
          <Row gutter={16}>
            <Col span={12}>
              <FormItem label="经度">
                {getFieldDecorator('longitude',)(<Input/>)}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="纬度">
                {getFieldDecorator('latitude')(<Input/>)}
              </FormItem>
            </Col>
          </Row>
          <Row>
           <Col span={24} style={{height:"300px"}}>
              <Map amapkey="2c6592b6062ac66" />
           </Col>
          </Row>
        </Form>
      </Modal>
    );
  }
);

我想把上面的组件写成class xxx extends 的形式，怎么转换？？？

Answer 1

import ...

class CollectionCreateForm extends Component{
    render(){
    const { visible, onCancel, onCreate, form, getAddress} = this.props;
    const { getFieldDecorator } = this.form;

    return(
      <Modal
        visible={visible}
        title="添加实例"
        okText="确认"
        onCancel={onCancel}
        onOk={onCreate}
      >
        <Form layout="vertical">
          <FormItem label="实例名称">
            {getFieldDecorator('edgeName', {
              rules: [{ required: true, message: '实例名称必须填写!' }],
            })(
              <Input/>
            )}
          </FormItem>
          <FormItem label="地址">
            {getFieldDecorator('position', {
              rules: [{ required: true, message: '地址必须填写!' }],
            })(<Input/>)}
          </FormItem>
          <Row gutter={16}>
            <Col span={12}>
              <FormItem label="经度">
                {getFieldDecorator('longitude',)(<Input/>)}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="纬度">
                {getFieldDecorator('latitude')(<Input/>)}
              </FormItem>
            </Col>
          </Row>
          <Row>
           <Col span={24} style={{height:"300px"}}>
              <Map amapkey="2c6592b6062ac66" />
           </Col>
          </Row>
        </Form>
      </Modal>
    );
    }
}

CollectionCreateForm = Form.create()(CollectionCreateForm);
export default CollectionCreateForm