redux-form 的动态表单名称

Question

有什么方法可以为 redux-form 设置动态表单名称吗？

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

Note: Container = Smart Component, Component = Dumb Component

目前我有一个容器（例如 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 时，动态创建它们时必须小心。我在 componentWillMount 中创建了 reduxForm HOC，因此它是用于每个渲染调用的同一个实例。 This is important for React's diffing algorithm.

redux-form 的动态表单名称

Dynamic Form Name for redux-form

reactjs

redux

redux-form