如何使用 typescript 向组件添加道具并做出反应？

Question

i have a Parent Component and i pass RouteComponentprops like below,

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

Now i want to add a prop OpenByDefault to the Parent component like below,

interface Props {
    OpenByDefault?: boolean;
}

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

i am not sure how to add {history: RouteComponentProps} to this Props as well.I am new to using typescript. could someone help me with this. thanks.

Answer 1

You have at least two options:

1. Extend RouteComponentProps when defining Props
2. Use an intersection type

---

Here's an example of #1:

interface Props extends RouteComponentProps {
    OpenByDefault?: boolean;
}

Then use Props instead of RouteComponentProps on Parent :

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

---

Here's an example of #2:

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

RouteComponentProps & Props means that the parameter Parent accepts is a combination of both RouteComponentProps and Props .

---

Since you say you're new to this stuff: By convention, OpenByDefault should be called openByDefault (lower case initial letter). In JavaScript and TypeScript, an initial capital letter is almost only ever used for constructor function names. (In React it's also used for component functions, even when they aren't constructors.)