Question

我使用redux来隐藏和显示基于值的组件。

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

应谨慎使用连接到多个字段，因为每次连接的任何字段都需要整个组件重新渲染。这可能是性能瓶颈。除非您绝对需要，否则您应该使用。
单独连接到您的字段

我不清楚我的隐藏和显示基于单选按钮的字段的解决方案是否足以使用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

还有另一种方法可以做到这一点，使用来自mapStateToProps的redux商店的redux-form选择器（http://redux-form.com/6.0.5/docs/api/Selectors.md/）选择特定值，然后有条件地渲染某些组件。

但是，我认为Fields正是您应该在这种情况下使用的。我认为这个警告很大程度上是为了警告人们不要把他们的整个形式都归入菲尔兹，让这三个领域重新投降并不是什么大不了的事。

导致首先创建Fields的思维过程可能是解决此问题的最佳方式：https://github.com/erikras/redux-form/issues/841

Redux表单域组件和验证

1 个答案: