Как добавить реквизит к компоненту с помощью машинописного текста и реагировать?

Question

у меня есть родительский компонент, и я передаю RouteComponentprops, как показано ниже,

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

Теперь я хочу добавить опору OpenByDefault к родительскому компоненту, как показано ниже,

interface Props {
    OpenByDefault?: boolean;
}

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

я не знаю, как добавить {history: RouteComponentProps} к этому реквизиту. Я новичок в использовании машинописного текста. может кто-нибудь помочь мне с этим. спасибо.

Answer 1

У вас есть как минимум два варианта:

1. Расширить RouteComponentProps при определении Props
2. Использовать тип пересечения

Вот пример # 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 он также используется для функций компонентов, даже если они не являются конструкторами.)