React & Typescript: глубокое слияние вложенных defaultProps

Question

Я создаю компонент React & Typescript и мне нужно определить некоторые реквизиты по умолчанию, которые являются объектами с вложенными данными. Вот упрощенный пример моего компонента:

type Props = {
    someProp: string,
    user: {
        blocked: boolean,
        active: boolean
    }
}

export const UserPage: React.FC<Props> = props => {
    (...)
};

Затем я определяю реквизиты по умолчанию следующим образом:

const defaultProps: Props = { 
    user: {
        blocked: true
    }
}

UserPage.defaultProps = defaultProps

Проблема в том, если мой компонент вызывается со следующими реквизитами

<UserPage user={{ active: true }}/>

чем пользовательский объект в реквизитах по умолчанию будет полностью перезаписан.

Каков наилучший способ объявления и объединения реквизитов и реквизитов по умолчанию с вложенными данными?

Answer 1

Вы можете использовать

const propsWithDefaults = Object.assign(defaultProps, props);