React中以点语法书写的组件有何特殊之处？

算力阿峰

2026-8-2

React组件点语法（如Card.Body）的作用与优势

把CardBody这类子组件挂载为Card的属性（Card.Body = CardBody），不只是为了可读性，还有这些实际价值：

语义关联与命名空间隔离
明确标识这是Card组件的配套子组件，属于同一个组件家族。避免全局命名冲突——比如项目里如果有其他库的Body组件，不会和CardBody混淆，因为它被限定在Card的命名空间下。
降低代码认知成本
看代码时一眼就能知道<Card.Body>和外层<Card>是配套的逻辑关系，不用翻import列表确认组件关联。大型项目组件多的时候，这种写法能减少心智负担。
简化导入与API一致性
不用单独导入每个子组件，只导入Card就能用所有配套子组件：
```
import { Card } from './components/Card';
// 无需额外写 import { CardBody, CardFooter } from './components/Card';
```
同时这种模式是UI库的通用设计（比如Bootstrap React、Material UI），用户已经习惯，统一的API风格能降低学习成本。
支持隐性逻辑绑定
可以在父组件内部给子组件注入默认配置，不用手动传递props。比如Card组件可以给Body自动加默认样式类：
```
// Card组件内部实现
Card.Body = (props) => {
  return <CardBody 
    {...props} 
    className={`${Card.defaultProps.bodyClassName} ${props.className || ''}`} 
  />;
};
```
子组件能自动继承父组件的上下文配置，提升开发效率。