变换函数组件 -> 类组件

Question

如何将这个函数补充转化为类组件 ：

const SyncValidationForm = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form className ="formmailforbook" onSubmit={handleSubmit(submit)}>

      <Field name="email" type="email" component={renderField} label="Email"/>
      <div>
        <button className ="hero_button margin_left" type="submit" disabled={submitting}>Submit</button>
      </div>
    </form>
  )
}

Answer 1

这非常简单.. 将代码复制到新文件并添加 export defaultbefore const 类似这样的内容。

export default const SyncValidationForm

在您需要组件的任何地方导入其他组件时导入文件，并将导入的名称用作 jsx 名称作为常用名称并提供道具。

Answer 2

翻译很简单，你可以在render 方法中做同样的道具解构。唯一轻微的变化是现在它从this.props拉出来了：

import React, { Component } from 'react';

export default class SyncValidationForm extends Component {
  render () {
    const { handleSubmit, pristine, reset, submitting } = this.props;
    return (
      <form className ="formmailforbook" onSubmit={handleSubmit(submit)}>

        <Field name="email" type="email" component={renderField} label="Email"/>
        <div>
          <button className ="hero_button margin_left" type="submit" disabled={submitting}>Submit</button>
        </div>

      </form>
    )
  }
}