Redux-Form v6で再利用可能なフォームコンポーネントグループを作成するにはどうすればよいですか？

Question

Redux-Form v6で使用する再利用可能なフォームコンポーネントグループ（セクション？）を作成しようとしています。理想的には、を知りたくありません。がフォーム内で使用されているので、（ルートまたはネストされた）フォーム内のどこでも使用できます。これどうやってするの？

たとえば、私はこのように、ReduxのフォームのFieldアドレス1、市、州、郵便番号、などのために使用していますAddressコンポーネントを持っている：

class Address extends React.Component { 
    render() { 
    return (
     <Field 
     component={MyReduxFormInput} 
     name="address1" // <== How to name for generic case? 
     /> 
    ) 
    } 
} 

ここでは単純化されたMyReduxFormInputです：

module.exports = field => { 
    return <input {...field.input} /> 
} 

私はユーザーの住所を収集する必要があるフォームを作成しているだけでなく、専門家の参考文献から複数の住所を収集しています。だから、Addressをルートに1回、入れ子にして複数回使用したいと思います。私が上に書いたように、ちょうどAddressを使うことはできません。なぜなら、それはルートアドレスでは機能しますが、ネストされた状況では機能しないからです。 FieldArray example docsに示されるように、Fieldに供給されるnameは、name={`${member}.address1`}である必要があります。しかし、それはルートではうまくいかないでしょう。

Addressコンポーネントがmember引数を取るのは、ルートで空白になるという考えです。私はそれを試み、報告します。しかし、私はRedux-Form Fieldコンポーネントが自動的にネストレベルを認識していると思っていました。階層を検索し、必要な接頭辞nameを知ることができます。

Answer 1

私のコンポーネントはmember prop（ネストに応じて名前の接頭辞のように）をとっています。私は何時間も前にそれを考えて欲しいと思っています。

ここのようにAddressが見えるものです：

class Address extends React.Component { 
    static propTypes = { 
    member: PropTypes.string 
    } 

    static defaultProps = { 
    member: '' 
    } 

    render() { 
    const { member } = this.props 
    const name = n => `${member}${n}` 

    return (
     <Field 
     component={MyReduxFormInput} 
     name={name('address1')} 
     /> 
    ) 
    } 
} 

そして、ここではそれが使用されるかもしれない方法は次のとおりです。

const references = ({ fields }) => { 
    return (
    <div> 
     fields.map((member, index) => { 
     return <Address member={member} key={index} /> 
     }) 
    </div> 
) 
} 

<Address /> 
<FieldArray name="professionalReferences" component={references} />