Redux 表单字段组件和验证

Question

我正在使用 redux 根据值隐藏和显示组件。

Redux 表单文档提到了以下内容:

Connecting to multiple fields should be used sparingly, as it will require the entire component to re-render every time any of the fields it is connected to change. This can be a performance bottleneck. Unless you absolutely need to, you should connect to your fields individually with .

我不清楚我的基于单选按钮隐藏和显示字段的解决方案是否足以使用 Fields给出谨慎使用的警告。

您能否澄清一下我的组件是否有足够的理由使用 Fields .如果不是，那么另一种实现方式是什么？

还有，如何 fields实现验证？

<div>
    <form>
      <Fields
       component={RadioButtonGroupField}
       names={['radioButtonGroup', 'nameTextField', 'nickNameTextField']}
      />
    </ form>
</div>

function RadioButtonGroupField(fields) {
    return(
      <div>
        <RadioButtonGroupComponent
          {...fields.radioButtonGroup.input}
          {...fields.radioButtonGroup.meta}
        />
        {
          (fields.radioButtonGroup.input.value === 'name' ||
          fields.radioButtonGroup.input.value === 'both') &&
          <NameTextFieldComponent
            {...fields.radioButtonGroup.input}
            {...fields.radioButtonGroup.meta}
          />
        }
        {
          (fields.radioButtonGroup.input.value === 'nickname' ||
          fields.radioButtonGroup.input.value === 'both') &&
           <NicknameTextFieldComponent
            {...fields.radioButtonGroup.input}
            {...fields.radioButtonGroup.meta}
          />
        }
      </div>
     );
  }

Answer 1

还有另一种方法可以做到这一点，使用 redux-form 选择器( http://redux-form.com/6.0.5/docs/api/Selectors.md/ )从您的 mapStateToProps 中的 redux 存储中选择特定值。然后有条件地渲染某些组件。

但是，我认为Fields正是您在这种情况下应该使用的。我认为警告主要是警告人们不要将整个表单放入字段中，让这 3 个字段重新渲染没什么大不了的。

导致 Fields 创建的思考过程首先可能是处理此问题的最佳方法:https://github.com/erikras/redux-form/issues/841