3.5 React Props介绍

既然React函数组件可以通过JavaScript函数方式实现，那么React函数组件就可以接受参数的传入。实际也确实如此，React框架定义了一个Props的概念，专门用来实现React函数组件接受参数的输入。

下面看一个使用React Props实现参数输入的具体代码实例：

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

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

●第18~24行代码分别定义了一个React函数组件（PropsReactComp()），注意在函数内定义了一个参数（props），具体说明如下：

► 第19~23行代码通过条件语句判断参数（props）是否为“true”，若为“true”，则执行第20行代码。

► 在第20行代码中，通过参数（props）对象获取其“name”属性值，这个“name”属性的定义在下面的第26行代码中。

●第26行代码中，通过const关键字定义了一个常量（eleProps），赋值为React函数组件（<PropsReactComp>）。这里的特别之处在于，在React函数组件（<PropsReactComp>）中增加定义了一个“name”属性，同时初始化了属性值（"King"）。在前面的第20行代码中，就是通过参数（props）对象获取了该“name”属性的值。

测试网页的效果如图3.4所示。如图中的箭头所示，页面中显示了props参数对象获取了的“name”属性的值（King），这个就是React Props的基本使用方法。

图3.4 React Props初步