我是ReactJS的新手，并且不确定放置表单中嵌套子组件所需的验证逻辑的最佳位置，以及整体＆＃34; parent＆＃34;表单组件本身。这是一个过于简化的例子，说明了我的问题......
我有一个这样的物体代表宠物主人：
<PetOwnerForm>我使用名为<PetOwnerForm>的复合组件来呈现用于编辑此数据的表单。 <input type="text" value={name} />
<PetList value={petOwner.pets} />
呈现如下内容：
<PetList> <PetListItem value={this.props.value[i]} /> // Render this for each pet...
// buttons for adding/deleting pets
是一个复合组件，可以呈现：
<PetListItem> <input type="text" value={this.props.value.name} />
<PetTypePicker value={this.props.value.type} />
呈现如下内容：
<PetTypePicker>最后，<select>为宠物类型呈现<option> <PetTypePicker>次。
<PetOwnerForm>需要知道如何验证所选类型，以便它可以显示内联错误消息（例如，确保选择了一个值）。
但是，<PetOwnerForm>还需要知道如何验证宠物类型，因为它需要知道如何验证整个对象（在加载时，每次更新表单时，以及在将数据提交回服务器）。如果任何字段无效，则＆＃34;保存＆＃34;按钮应该被禁用。
那么，例如，＆＃34;是否应该选择有效的宠物类型？＆＃34;逻辑去？ （请记住，这是一个简单的例子;实际上我有很多像这样的字段和嵌套的复合组件。）
到目前为止我看到的选项是：
A）在<PetTypePicker>和//PetOwnerForm.js:
validate(petOwnerObj) {
Util.isPetTypeValid(petOwnerObj.pets[i]) // for each pet
// validate the other properties in petOwnerObj...
}
//PetTypePicker.js:
validate(petType) {
Util.isPetTypeValid(petType)
}
中复制宠物类型（或任何字段）的验证逻辑。这可能只是在两个地方调用相同的共享验证函数：
{
name: { value: 'Jon Arbuckle', isValid: ()=>{...} },
pets: [
{
name: { value: 'Garfield', isValid: ()=>{...} },
type: { value: 'cat', isValid: ()=>{...} }
},
...
]
}
B）使用具有自己的验证器的自定义PetOwner，Pet和PetType模型。这样，您始终可以要求模型自行验证，无论它在何处。也许这看起来像这样：
{
name: { value: 'Jon Arbuckle asdfasdfasdf^^', errors: ['Too many characters', 'Contains invalid character']] },
pets: [
{
name: { value: '', errors: ['Required value missing'] },
type: { value: 'tree', errors: ['Invalid pet type'] }
},
...
]
}
C）修改PetOwnerForm.js来递归宠物主人对象，验证每个值，并设置错误＆＃39;子组件可以引用的属性，从而产生如下对象：
{{1}}
建议React应用选择哪个选项（还是有其他选项）？
答案 0 :(得分：1)
这是一个很精细的问题。此问题并非特定于ReactJS应用程序。它适用于遵循组件模型的所有框架。
以下是我的建议：