是否可以有效地擴展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;博士：流量不支持擴展類型暫且。該功能被要求，並且對相關問題發表評論可能會使其更快出現。