在 React 和 TypeScript 中扩展 HTML 元素，同时保留 props

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={...}/>

每当我尝试这种组合时，都会收到类似于以下内容的错误：

foo 的属性“ref”不可分配给目标属性。

原文由 Josh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以更改组件的定义以允许响应 html 按钮道具

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

这将告诉打字稿编译器您想要输入按钮道具以及“MyButtonProps”

原文由 Jordan Upham 发布，翻译遵循 CC BY-SA 3.0 许可协议