我建立具有LoginForm的和重置表单形式简单的SPA应用。如果我在React中重复自己,我应该创建一个组件吗?
这两个组件的共享方法 getInputFields()
和handleSubmit()
这里是我的代码示例:
import React from 'react';
import InputField from './InputField';
import SubmitButton from './SubmitButton';
class ResetForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.getInputFields = this.getInputFields.bind(this);
}
handleSubmit(e) {
e.preventDefault();
console.log('submitted');
}
getInputFields() {
return [
{ type: 'email', placeholder: 'Email' }
]
}
render() {
return (
<form onSubmit={ this.handleSubmit }>
{
this.getInputFields()
.map((field) => <InputField type={ field.type } placeholder={ field.placeholder } />)
}
<SubmitButton />
</form>
)
}
}
export default ResetForm;
而且我LoginForm的只有不同的数据(内getInputFields()
)
如果我再说一遍,我是否应该自动考虑制作一个新组件?例如在这种情况下是<Form>
组件并将getInputFields()
的值作为通道传递给Form?
可能会有帮助https://twitter.com/dan_abramov/status/793127800769224704?lang=en – Abhishek