Wie mache ich eine wiederverwendbare Formular-Komponentengruppe mit Redux-Form v6?

Question

Ich versuche, eine wiederverwendbare Formularkomponente Gruppe (Abschnitt?) Für die Verwendung mit Redux-Form v6 zu machen. Idealerweise möchte ich nicht wissen, dass es wo es innerhalb eines Formulars verwendet wird, so dass ich es überall innerhalb eines Formulars (im Stamm oder verschachtelt) verwenden kann. Wie kann ich das machen?

Zum Beispiel, ich habe eine Address Komponente, die Redux-Form des Field für address1 verwendet, Stadt, Bundesland, Postleitzahl, etc., wie folgt aus:

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

Hier ist ein vereinfachtes MyReduxFormInput:

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

Ich erstelle ein Formular, wo ich die Adresse des Benutzers, sowie mehrere Adressen von einigen professionellen Referenzen sammeln muss. Also, ich möchte Address einmal an der Wurzel und mehrfach in einer verschachtelten Weise verwenden. Der Trick ist, ich kann nicht einfach Address verwenden, wie ich es oben geschrieben habe, denn während das für die Root-Adresse funktioniert, wird es nicht für verschachtelte Situationen funktionieren. Wie in der FieldArray example docs gezeigt, muss die name, die an Field geliefert wird, name={`${member}.address1`} sein. Aber dann würde das nicht an der Wurzel funktionieren.

Eine Idee, die mir gerade eingefallen ist, ist, dass die Address Komponente ein member Argument nimmt, das an der Wurzel leer wäre. Ich werde es versuchen und melden. Aber ich dachte, Redux-Form Field Komponenten würden automatisch ihre Verschachtelungsebene bewusst sein; Sie sollten ihre Hierarchie nachschlagen und ihr erforderliches name Präfix kennen.

Answer 1

Meine Idee von meiner Komponente eine member Requisite (wie in einem Namenspräfix abhängig von der Verschachtelung) funktioniert großartig. Ich wünschte, ich hätte vor vielen Stunden daran gedacht.

Hier ist, was Address wie folgt aussieht:

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')} 
     /> 
    ) 
    } 
} 

Und hier ist, wie es verwendet werden könnte:

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

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