首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >转换函数组件->类组件

转换函数组件->类组件
EN

Stack Overflow用户
提问于 2018-06-07 04:31:58
回答 2查看 57关注 0票数 -1

如何将此函数补充转换为类组件

代码语言:javascript
复制
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>
  )
}
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-06-07 04:39:07

转换非常简单,您可以在render方法中执行相同的属性解构。唯一细微的变化是,它现在从this.props中拉出

代码语言:javascript
复制
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>
    )
  }
}
票数 0
EN

Stack Overflow用户

发布于 2018-06-07 04:58:29

这很容易..将代码复制到新文件中,并在const之前添加export default,如下所示。

代码语言:javascript
复制
export default const SyncValidationForm

像导入其他组件一样导入文件,并将导入的名称用作jsx名称,将导入的名称用作usal,并提供props。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50729101

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档