我们的React应用程序很大，输入栏是最常用的组件之一（我们使用的是材料UI库提供的组件）。这些组件看起来非常相似，如下所示：
<TextField
id="fieldName"
label="Field Name"
name="fieldName"
value={this.state.formData.fieldName}
onChange={this.handleChange}
helperText={this.HELPER_TEXTS.fieldName}
error={this.state.isInError.fieldName}
/>
handleChange函数几乎总是相同的基本函数，而这两件事导致大量重复和复制粘贴以前的组件。
在我之前在这里工作的前端开发人员通过创建包装器组件解决了此重复问题，但是（imo）他对这个想法有点过头了，还包括将字段数据存储在<form>中自定义组件。这导致了一个僵硬的系统，很难扩展或使用一些不适合此“模板”的组件。
我恢复了他的努力，并在我们有输入字段的每个位置创建了一个generalProperties函数，因此很容易在个案的基础上偏离规范，但仍然需要较少的重复。该函数看起来像这样：
getGeneralProps(field) {
return {
helperText: this.HELPER_TEXTS.field,
error: this.isInErrorState(field),
id: field,
name: field,
onChange: this.handleChange,
value: this.state.formData[field],
};
}
使用这样的功能的组件：
<TextField
label='Field Name'
{...this.getGeneralProps('fieldName')}
/>
但是我仍然发现自己会反复复制粘贴和handleChange函数，因此我认为我的方法仍然可以改进，但是我不确定分离的好坏这样的组件的重要部分。