ReactJS:在具有 "nested"复合组件的表单中将验证逻辑放在哪里？

Question

我是 ReactJS 的新手，不确定将表单中的嵌套子组件和整个“父”表单组件本身所需的验证逻辑放在最佳位置。这是一个过于简化的例子来说明我的问题......

我有一个代表宠物主人的对象:

{
  name: 'Jon Arbuckle',
  pets: [
   { name: 'Odie', type: 'dog' },
   { name: 'Garfield', type: 'cat' }
  ]
}

我正在使用一个名为 <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> s 表示宠物类型。

<PetTypePicker>需要知道如何验证所选类型，以便它可以显示内联错误消息(例如，确保选择了一个值)。

然而，<PetOwnerForm>还需要知道如何验证宠物类型，因为它需要知道如何验证整个对象(加载时、每次更新表单时以及将数据提交回服务器之前)。如果任何字段无效，则应禁用“保存”按钮。

那么，例如，“是否选择了有效的宠物类型？”应该在哪里？逻辑何去何从？ (请记住，这是一个微不足道的示例；实际上我有很多这样的字段和嵌套的复合组件)。

目前我看到的选项是:

A) 在 <PetOwnerForm> 中复制宠物类型(或任何字段)的验证逻辑和 <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)
}

B) 使用具有自己验证器的自定义 PetOwner、Pet 和 PetType 模型。这样你就可以随时要求模型验证自己，无论它在哪里。也许这看起来像这样:

{
  name: { value: 'Jon Arbuckle', isValid: ()=>{...} },
  pets: [
  {
    name: { value: 'Garfield', isValid: ()=>{...} },
    type: { value: 'cat', isValid: ()=>{...} }
   },
   ...
  ]
}

C) 修改 PetOwnerForm.js 去递归宠物主人对象，验证每个值，并设置一个子组件可以引用的“错误”属性，结果是这样的对象:

{
  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'] }
    },
    ...
  ]
}

对于 React 应用推荐哪个选项(或者是否有其他选项)？

Answer 1

这是一个精心设计的问题。这个问题并不特定于 ReactJS 应用程序。它适用于所有遵循组件模型的框架。

以下是我的建议:

• 区分操作驱动的验证和数据格式验证。
• 低级组件知道它们接受的数据格式，因此它们必须对其进行验证。例如，邮政编码、电子邮件、电话、SSN 等具有固定格式，它们的相应组件必须验证正确的输入格式。
• 低级组件不知道对整体数据执行的操作。例如，宠物主人类型的选择对于“创建”宠物主人 Action 来说是强制性的，但对于“保存草稿” Action 来说是可选的。因此，不了解最终操作的低级组件不得执行操作驱动的验证。
• Action 驱动的验证必须由了解 Action 的更高级别的组件执行，例如 PetOwnerForm。必须将此类验证结果通知给低级组件，以便它们可以显示适当的错误。每个低级组件都必须有一个错误状态来支持它。