javascript - ReduxForm-动态连接参数

我正在将ReduxForm与两种形式的表单一起使用：


内部模态
标签内。


取决于表单的类型，我必须调整我的reduxForm的“连接”参数。

使用Tab，我需要：


destroyOnUnmount
enableReinitialize
[...]


与莫代尔，我不要他们。

我的表单通过Props获取表单的类型，但是我不能用它来适应我的reduxForm。

export defaut ReduxForm({
   form : 'testForm',
   destroyOnUnmount : false,
   enableReinitialize: true ,
   [...]
  })(MyForm)

我不知道该如何适应。

谢谢

最佳答案

我不确定您要问什么的100％，但我想我有一个很好的线索：如果您的表单位于Tab内而不是表格内，您希望能够添加destroyOnUnmount和enableReinitialize道具如果您的表单位于模态中，请添加它们，对吗？

您可以通过将reduxForm包裹的组件与connect中的react-redux包裹在一起，然后使用mapStateToProps确定要为redux-form传递哪些道具值来做到这一点。像这样：

const mapStateToProps = (state, ownProps) => {
  const { insideTab } = ownProps

  return {
    ...ownProps,
    destroyOnUnmount: !insideTab,
    enableReinitialize: !!insideTab
  }
}

export default connect(mapStaToProps)(
  ReduxForm({ form : 'testForm' })(MyForm)
)

然后您可以像这样使用

// this creates a container with
// destroyOnUnmount=false
// and
// enableReinitialize=true
<MyFormContainer insideTab />

// this creates a container with
// destroyOnUnmount=true
// and
// enableReinitialize=false
<MyFormContainer />

希望这可以帮助！