React组件中Object.assign与赋值运算符(=)的使用抉择及规范

一、组件挂载场景的合理性分析 #

你示例中用Object.assign把Header、Body挂载到PageSection组件上的写法：

function PageSection({children}) {
    return <div>{children}</div>
}

function Header({children}) {
    return <div>{children}</div>
}

function Body({children}) {
    return <div>{children}</div>
}

// Attach components to the `PageSection` component.
export default Object.assign(PageSection, {
    Header,
    Body,
});

这属于React开发中非常常见的合理实践，不属于反模式。它的作用是把关联子组件作为父组件的静态属性导出，方便使用者通过PageSection.Header、PageSection.Body的方式调用，让代码结构更规整，相关组件的归属关系更清晰（类似UI库中Modal.Header、Drawer.Footer的写法）。

如果换成直接赋值的方式：

PageSection.Header = Header;
PageSection.Body = Body;
export default PageSection;

和Object.assign的效果完全一致——两者都是给PageSection这个函数组件添加静态属性，不会影响组件的引用地址、状态管理或渲染逻辑。区别仅在于代码风格：Object.assign适合批量添加多个属性，直接赋值更适合单个属性的挂载。

二、嵌套属性赋值的可接受性 #

你提到的Header.CloseButton = CloseButton、PageSection.Header = Header这类嵌套属性赋值，同样是可接受的实践，本质是给组件的静态属性再添加子层级的关联组件，进一步细化组件的归类逻辑。

使用时只需注意两点：

• 仅对自己维护的组件做这类操作，不要修改第三方UI库组件的静态属性，避免版本更新时被覆盖或引发意外问题
• 控制属性层级深度，不要嵌套过多（比如A.B.C.D），否则会降低代码可读性

内容的提问来源于stack exchange，提问作者Tommy Wolfheart