Übergeben Sie benutzerdefinierte Requisiten an Redux-Formularfeld in TypeScript

Question

Ich möchte benutzerdefinierte Eigenschaften an mein Redux-Form-Feld übergeben. In der Dokumentation heißt es:

Any custom props passed to Field will be merged into the props object on the same level as the input and meta objects.

Aber vorbei eine eigene Stütze an die Feldkomponente einen Compiler-Fehler werfen:

<Field 
    name="E-Mail" 
    component={MaterialTextField} 
    myProp="Test" 
/> 

Property 'MyProp' existiert nicht auf Typ ‚(IntrinsicAttributes & IntrinsicClassAttributes> & ...

Innerhalb des Requisitenattributs kann ich nur einen vordefinierten Satz von Eigenschaften wie Platzhalter oder Typ hinzufügen.Wenn Sie eine andere Requisite übergeben, wird dieser Fehler ausgelöst:

<Field 
    name="E-Mail" 
    component={MaterialTextField} 
    props = {{ 
     myProps: 'Test' 
    }} 
/> 

Typ '{Name: "E-Mail"; Komponente: (Requisiten: any) => Element; Requisiten: {myProps: string; }; } ‚Ist nicht übertragbar auf den Typ‘ (IntrinsicAttributes & ...

Gibt es eine Möglichkeit, benutzerdefinierte Requisiten auf die Feldkomponente in Typoskript?

Answer 1

Nach etwas mehr auf meiner Seite Experimentieren fand ich eine Lösung benutzerdefinierte Requisiten weitergeben müssen:

<Field 
    name="myName" 
    props={{ 
     type: 'text' 
    }} 
    component={myComponent} 
    {...{ 
     myCustomProps1: 'myCustomProp1', 
     myCustomProps2: 'myCustomProp2' 
    }} 
/> 

In myComponent haben Sie Ihre benutzerdefinierten Requisiten auf der Root-Ebene Ihrer Eigenschaften :

const myComponent = (props) => { 
    return <div>{props.myCustomProp1 + " " props.myCustomProp2}</div> 
} 

Answer 2

Ich bin kein Typoskript Benutzer zu passieren, ich bin so nicht Sicher, wie die Typdefinitionen funktionieren, aber ich fand this thread about type definitions for Redux-form v6. Am Ende verknüpfen sie zu this repository, die (wenn ich es richtig verstehe) aktualisierte Typdefinitionen haben.

Ich denke, eine Alternative wäre, auf Vanille JS zu wechseln Für diese spezielle Funktionalität könnte es auch möglich sein, eine Funktion zu definieren, die Ihre benutzerdefinierte Requisite übernimmt und dann eine Komponente zurückgibt, die bereit ist, die rote Requisite zu übernehmen Baue Requisiten und füge sie zusammen.

Bearbeiten: Ich habe versucht, die Grundidee des letzten Vorschlags, eine so genannte HOC (Higher Order Component), in den unten stehenden Code zu veranschaulichen.

const inputWithCustomFields = (customFields) => ComponentToGetExtraFields => (props) => { 
 
\t const mergedProps = {...props, ...customFields}; 
 
\t return (<ComponentToGetExtraFields {...mergedProps} />); 
 
}; 
 

 
const ComponentThatNeedsCustomStuff = ({myCustomField1, myCustomField2, ...rest}) => { 
 
\t console.log('doing stuff with the custom props',myCustomField1, myCustomField2); 
 
\t return (<div><h1>{myCustomField1 + myCustomField2}</h1><input {...rest} /></div>); 
 
} 
 

 
const Parent =() => { 
 
    const myCustomFields = { 
 
    myCustomField1: "Hello, ", 
 
    myCustomField2: "world!", 
 
    value: 'can\'t change me', 
 
    onChange:() => { /* do nothing */ } 
 
    }; 
 
    const MergedComponent = inputWithCustomFields(myCustomFields)(ComponentThatNeedsCustomStuff); 
 
    return (<div> 
 
     <MergedComponent /> 
 
    </div>); 
 
}; 
 

 
ReactDOM.render(<Parent />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>