组件嵌套

React 组件可以在内部引用其他组件,这使得我们可以用组件抽象来构建复杂的 UI。

组件嵌套的基础

组件可以在其输出中引用其他组件。这让我们可以在任意层级使用相同的组件抽象。

示例: 评论组件

让我们创建一个评论组件,它包含头像/用户名/评论内容和评论时间。

1. 创建子组件

首先创建一个 Avatar 组件:

function Avatar(props) {
  return (
    <img className="avatar"
         src={props.user.avatarUrl}
         alt={props.user.name}
    />
  );
}

2. 创建中间层组件

创建一个 UserInfo 组件,它使用 Avatar 组件:

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

3. 创建父组件

最后创建 Comment 组件,它使用 UserInfo 组件:

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

组件嵌套的好处

• 可复用性: 组件可以在多个地方使用
• 可维护性: 每个组件专注于单一职责
• 可测试性: 小的组件更容易测试
• 清晰的层次: 组件树结构清晰

最佳实践

• 保持组件简单和专注
• 一个组件应该只做一件事
• 如果组件变得复杂,将其拆分为更小的子组件
• 使用 props 清晰地传递数据

下一步

了解组件嵌套后,继续学习样式。