Расширение HTML-элементов в React и TypeScript при сохранении реквизита

Question

Я просто не могу обернуть голову вокруг этого, я думаю, я пробовал, наверное, полдюжины раз и всегда прибегаю к any ... Есть ли законный способ начать с HTML-элементом, обернуть это в компоненте и обернуть его в другом компоненте, чтобы HTML-реквизит проходил через все? По сути настраивать элемент HTML? Например, что-то вроде:

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/>; 
    } 
} 

Использование:

<MyAwesomeButton onClick={...}/> 

Всякий раз, когда я пытаюсь такого рода композиции, я получаю сообщение об ошибке, подобное:

свойство 'исх' обув является не присваивается целевому свойству.

Answer 1

Вы можете изменить определение компонента, чтобы позволить реагировать кнопка HTML реквизита

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

Это покажет машинописи компилятор, который вы хотите, чтобы ввести кнопку реквизита вместе с «MyButtonProps»