Я просто не могу обернуть голову вокруг этого, я думаю, я пытался, вероятно, полдюжины раз и всегда прибегаю к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={...}/>

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

Свойство 'ref' объекта foo не может быть назначено целевому свойству.