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 repo中有open issue on making this possible。

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

tl; dr：Flow目前不支持扩展类型。要求使用该功能，对相关问题进行评论可能会使其更快出现。

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

1 个答案: