ReduxForm - 动态连接参数

Question

我使用的 ReduxForm 有两种类型的表单：

模态框内
标签内。

取决于表单的类型，我必须调整我的 reduxForm 'connect' 参数。

使用 Tab，我需要：

destroyOnUnmount
启用重新初始化
[ ... ]

使用 Modal，我不需要它们。

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

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

我不知道如何适应这个。

谢谢

Answer 1

不导出 redux 表单，而是导出一个 returns 它的函数：

export default isTab => ReduxForm({
  form : 'testForm',
  destroyOnUnmount : !!isTab,
  enableReinitialize: !!isTab ,
  [...] 
})(MyForm)

然后

import makeMyForm from 'MyForm'
const TabForm = makeMyForm(true);
const ModalForm = makeMyForm();

Answer 2

我不是 100% 确定你在问什么，但我想我有一个很好的线索：你希望能够添加 destroyOnUnmount 和 enableReinitialize 道具如果您的表单位于 Tab 内，如果您的表单位于模式内，则不添加它们，对吗？

您可以通过使用 react-redux 中的 connect 包装您的 reduxForm 包装组件，然后使用 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 />

希望对您有所帮助！

ReduxForm - 动态连接参数

ReduxForm - Dynamic connect parameter

javascript

reactjs

redux

redux-form