React组件支持在自身定义中引用其他组件，从而构成React组合组件（也称复合组件）。使用React组合组件定义的好处就是，可以使用同一组件来抽象出任意层次的细节，比如一个React表单组件就可以由多个不同类型的子组件来构成，还有对于对话框组件来说也是如此。

下面看一个通过React组合组件实现用户登录表单的代码实例，具体如下：

【代码3-5】（详见源代码目录ch03-react-comp-composing.html文件）

关于【代码3-5】的说明：

• 第18~44行代码分别定义了若干React函数组件，用于构建一个React组合组件，该组合组件定义为一个用户登录表单，具体说明如下：
  • ►　第18~20行代码定义的React函数组件（FormTitle()），用于定义表单名称。
  • ►　第21~26行代码定义的React函数组件（UserId()），用于定义表单中的用户id域控件。
  • ►　第27~32行代码定义的React函数组件（UserName()），用于定义表单中的用户名域控件。
  • ►　第33~38行代码定义的React函数组件（Password()），用于定义表单中的密码域控件。
  • ►　第39~44行代码定义的React函数组件（Submit()），用于定义表单中的提交按钮域控件。
• 关键是第46~56行代码定义的React组合组件（FormLogin()），其中第49~53行代码分别引用了第18~38行代码定义的若干React函数组件，用来组成表单中的各个用户域。
• 第58行代码中，通过const关键字定义了一个常量（formLogin），赋值为React组合组件（<FormLogin>）。
• 第63行代码中，通过将常量（formLogin）放入JSX代码（{formLogin}）来实现React组合组件的应用。

测试网页的效果如图3.3所示。如图中的标识所示，页面中显示了通过React组合组件实现的用户登录表单页面。