React学习手册

Props

、

State

和组件树

｜

111

表

6

-

1

：React属性验证

类型

验证器

数组

React.PropTypes.array

布尔值

React.PropTypes.bool

函数

React.PropTypes.func

数字

React.PropTypes.number

对象

React.PropTypes.object

字符串

React.PropTypes.string

在这一节中，我们将为菜谱应用创建一个

Summary

组件。这个

Summary

组件将会显示菜

谱的标题，以及食材成分和烹饪步骤的数目（见图

6-1

）。

图

6

-

1

：Baked Salmon使用Summary组件描述的输出结果

为了显示这些数据，我们必须为

Summary

组件提供以下三种属性：标题，食材成分数

组和烹饪步骤数组。现在希望对这些属性进行验证，从而确保第一个属性是字符串类

型，其余的是数组类型，并且在它们无法通过属性验证时，提供默认参数。如何实现

属性验证功能取决于组件是如何创建的。无状态函数式组件和

ES6

的类有多种实现属

性验证的方法。

首先，让我们来看看用户应使用属性验证的原因，以及如何在

React.createClass

创

建的组件中实现它。

使用

createClass

验证

Props

我们需要理解验证组件属性为何如此重要的原因。考虑下面这个

Summary

组件的代码

实现：

const Summary = createClass({

displayName: "Summary",

render() {