控除フォームの動的フォーム名

Question

redux-formの動的フォーム名を使用する方法はありますか？

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

注：コンテナ= Smartコンポーネント、コンポーネント=ダムコンポーネント

現在、私はそれがフィールドを持つコンポーネントをラップした容器（例えば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) 

注：HOCsを扱う場合動的に作成するときあなたは注意する必要があります。 reduxForm HOCをcomponentWillMountに作成し、各レンダリングコールで使用されたのと同じインスタンスにします。 This is important for React's diffing algorithm。