使无状态组件对类组件语法做出反应

Question

I just upgraded react from v15.6.2 to v 16.5.2 and now I am getting a few errors along the lines of...

Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

After searching for an answer, it looks like I need to convert some stateless components to class components. My problem is with the syntax. If I have the following component, how would I convert it to a class component?

const CategoryForm = Form.create()(
  (props) => {
    const { visible, onCancel, onSubmit, form } = props;
    const { getFieldDecorator } = form;
    return (
      <Modal
        visible={visible}
        title="Create New Category"
        okText="Create"
        onCancel={onCancel}
        onOk={onSubmit}
      >
        {this.renderForm(getFieldDecorator)}
      </Modal>
    );
  }
);

Answer 1

const CategoryForm = Form.create()(class extends React.Component {
  render() {
    const { visible, onCancel, onSubmit, form } = this.props;
    const { getFieldDecorator } = form;

    return (
      <Modal
        visible={visible}
        title="Create New Category"
        okText="Create"
        onCancel={onCancel}
        onOk={onSubmit}
      >
        {this.renderForm(getFieldDecorator)}
      </Modal>
    );
  }
});