是否可以有效地扩展 HTMLProps 类型？

Question

我想做的是类似这样的事情：

MyButton.jsx

type Props = { foo?: 'x' | 'y' | 'z'; ...HTMLProps<HTMLButtonElement> };

const MyButton = ({ foo = 'y', ...props }: Props) => {
    return (
        <button class={foo} {...props}/>
    )
}

Application.jsx

...
render() {
    <MyButton
        onClick={() => this.setState({ bar: true })}
        foo="z" />
}
...

不幸的是，这种用于将一种类型或接口的所有内容复制到另一种类型或接口的语法不存在。

FlowType 对 HTML 属性的支持非常有用，我不想将它们全部复制到我自己的 props 定义中，只是为了将它们传递给子元素 - 相反，我只是想要将我自己的一些属性添加到此列表中，将它们摘下并将其余部分发送到链中。

Answer 1

很遗憾，您不能这样做。 Flowtype 仓库中有一个 open issue on making this possible。

一种可能的解决方法是让您的一个道具成为类型为 HTMLProps 的对象，其中包含您需要的所有 HTML 属性，并让您的其他道具单独传递。但是，处理起来会稍微麻烦一些。对于这种特定情况，您也可以不使用 Flow，而是依赖 React 的基于 PropTypes 的运行时间验证，尽管这也会带来更多不便。

tl;dr: Flow暂时不支持扩展类型。该功能已被请求，对相关问题发表评论可能会使其更快推出。

是否可以有效地扩展 HTMLProps 类型？

Is it possible to effectively extend the HTMLProps type?

javascript

types

jsx

reactjs

flowtype