reactjs - 变换函数组件 -> 类组件
问题描述
如何将此功能补充转换为类组件 :
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>
)
}
解决方案
很简单的翻译,你可以在方法中做同样的道具解构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>
)
}
}
推荐阅读
- java - java-递归查找数组中的特定路径
- msbuild - Osquery MsBuild 错误 msb1009
- react-native - 在 React Native 中使用 Metro 捆绑器时,Webpack 加载器的等价物是什么?
- sql - SQL 累积列
- javascript - 检索 oView 的所有现有 Id
- php - 具有 PHP mysql 扩展的类异步行为
- amazon-web-services - 在另一个账户中担任角色后恢复为 AWS Lambda 执行角色
- python - Google Maps Places API 未经授权的错误
- c# - 在内存中创建文件夹?
- angular - 如何在 AngularDart5 中查找和修复 ChangeDetection 的问题?