如何使用打字稿向道具添加道具并做出反应？

Question

我有一个父组件，并且我通过了如下的RouteComponentprops，

function Parent({ history }: RouteComponentProps) {
    //some logic
}

现在我要向如下所示的Parent组件添加一个道具OpenByDefault，

interface Props {
    OpenByDefault?: boolean;
}

function Parent({OpenByDefault = false}: Props) {
    //some logic
}

我不确定如何向此道具添加{history：RouteComponentProps}。我是使用打字稿的新手。有人可以帮我吗谢谢。

Answer 1

您至少有两个选择：

1. 定义RouteComponentProps时扩展Props
2. 使用intersection type

---

这里是＃1的示例：

interface Props extends RouteComponentProps {
    OpenByDefault?: boolean;
}

然后在Props上使用RouteComponentProps代替Parent：

function Parent({ history, OpenByDefault }: Props) {
    // ...
}

---

这里是＃2的示例：

function Parent({ history, OpenByDefault }: RouteComponentProps & Props) {
    // ...
}

RouteComponentProps & Props表示参数Parent接受的是RouteComponentProps和Props的组合。

---

因为您说自己是新手，所以：按照惯例，OpenByDefault应该称为openByDefault（小写的首字母）。在JavaScript和TypeScript中，首字母大写几乎只用于构造函数名称。 （在React中，它也用于组件函数，即使它们不是构造函数。）