是否可以有效地扩展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" /> 
} 
... 

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

对HTML属性的FlowType支持非常有用，我不想将它们全部复制到我自己的道具定义中，以便它们可以传递给子元素 - 相反，我只是想添加一些把我自己的财产放在这个清单上，把它们摘下来，把余下的东西送到这个链条上。

Answer 1

不幸的是，你不能做到这一点。 Flowtype回购中有open issue on making this possible。

可能的解决方法是将您的其中一个道具作为HTMLProps类型的对象，其中包含您需要的所有HTML属性，并让您的其他道具分开传递。但是，这样处理起来会有些麻烦。你也可以不使用Flow来处理这个特定的情况，并且依靠React的基于PropTypes的运行时验证，尽管这样做也会更不方便。

TL;博士：流量不支持扩展类型暂且。该功能被要求，并且对相关问题发表评论可能会使其更快出现。