redux-form的动态表单名称

Question

有没有办法为设置动态表单名称？

reduxForm({
  form: `${dynamicFormNameHere}`,
})(Component)

  

注意：Container =智能组件，组件=哑组件

目前我有一个包含字段的组件的容器（例如FilterContainer），我在几个组件中使用该容器。例子：

// UserComponent.jsx
...
render() {
  ...
  <FilterContainer dynamicName="UserFilterForm" { ... } />
}

// ProductComponent.jsx
...
render() {
  ...
  <FilterContainer dynamicName="ProductFilterForm" { ... } />
}

和FilterContainer

内

mapStateToProps() { ... }
mapDispatchToProps() { ... }

let FilterContainer = connect(
  mapStateToProps,
  mapDispatchToProps,
)(reduxForm({
  form: `${dynamicName from props}`
}}(FilterComponent))

dynamicName from props是我想要实现的目标。

Answer 1

为了实现这一目标，您需要引入一个包含reduxForm高阶组件（HOC）的新组件。类似的东西：

class DynamicFilterComponent extends React.Component {
  componentWillMount() {
    this.Filter = reduxForm({
      form: this.props.dynamicName
    })(FilterComponent)
  }

  render() {
    const Filter = this.Filter
    return <Filter {...this.props} />
  }
}

然后将其包装在connect：

中

mapStateToProps() { ... }
mapDispatchToProps() { ... }

let FilterContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(DynamicFilterComponent)

注意：在处理HOC时，动态创建时必须小心。我在reduxForm中创建了componentWillMount HOC，因此它与每个渲染调用使用的实例相同。 This is important for React's diffing algorithm