Erweitern HTML-Elemente in React und TypeScript beim Bewahren Requisiten

Question

Ich kann einfach nicht meinen Kopf um diese schätze ich vermute, ich habe wahrscheinlich ein halbes Dutzend Mal versucht und immer auf any zurückgreifen ... Gibt es eine legitime Möglichkeit zu starten Mit einem HTML-Element das in einer Komponente umbrechen und das in eine andere Komponente umwandeln, so dass die HTML-Requisiten alles passieren? Im Wesentlichen das HTML-Element anpassen? Zum Beispiel so etwas wie:

interface MyButtonProps extends React.HTMLProps<HTMLButtonElement> {} 
class MyButton extends React.Component<MyButtonProps, {}> { 
    render() { 
     return <button/>; 
    } 
} 

interface MyAwesomeButtonProps extends MyButtonProps {} 
class MyAwesomeButton extends React.Component<MyAwesomeButtonProps, {}> { 
    render() { 
     return <MyButton/>; 
    } 
} 

Verbrauch:

<MyAwesomeButton onClick={...}/> 

Jedes Mal, wenn ich diese Art der Zusammensetzung versuchen, erhalte ich eine Fehlermeldung ähnlich:

Property 'ref' von foo nicht der Zieleigenschaft zuweisbar

Answer 1

Sie können die Definition Ihrer Komponente ändern, um die HTML-Taste Requisiten reagieren zu lassen

class MyButton extends React.Component<MyButtonProps & React.HTMLProps<HTMLButtonElement>, {}> { 
    render() { 
     return <button {...this.props}/>; 
    } 
} 

dass das Typoskript Compiler sagen wird, dass Sie die Taste Requisiten eingeben möchten zusammen mit ‚MyButtonProps‘