3.6 React Props应用

既然React Props可以接受参数的传入，它就可以在具体项目应用发挥很大的作用。下面看一个使用React Props参数实现表单初始化的代码实例，具体如下：

【代码3-7】（详见源代码目录ch03-react-props-form.html文件）

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

●这段代码是在【代码3-5】的基础上修改而成的，主要是通过React Props参数传入实现表单的初始化操作。

●第18~44行代码分别定义了若干React函数组件，用于构建一个React组合组件，该组合组件定义为一个用户登录表单。此处的定义与【代码3-5】类似，不同之处说明如下：

► 在第21~26行代码定义的React函数组件（UserId()）中，增加了Props参数的定义。

► 在第27~32行代码定义的React函数组件（UserName()）中，也增加了Props参数的定义。

●在第46~56行代码定义的React组合组件（FormLogin()）中，第50行和第51行代码分别增加了“userId”和“userName”属性的定义，同时初始化了属性值。

测试网页的效果如图3.5所示。如图中的箭头所示，页面表单中的“User Id”项和“User Name”项分别进行了初始化操作，分别获取了属性值（007）和属性值（King）。

图3.5 React Props初始化表单项