javascript - React & Typescript：嵌套 defaultProps 深度合并

我正在创建一个 React 和 Typescript 组件，需要定义一些默认 props，这些 props 是包含嵌套数据的对象。以下是我的组件的简化示例：

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

问题是，如果我的组件被以下 props 调用

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

默认属性中的用户对象将被完全覆盖。

用嵌套数据声明和合并 props 与默认 props 的最佳方法是什么？

答案＃1

你可以使用

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