React学习手册

116

｜

第

6

章

<span>{ingredients} Ingredients | </span>

<span>{steps} Steps</span>

</p>

</div>

)

}

}

现在，当我们尝试在不提供属性数据的情况下渲染该组件，会看到系统采用了默认属

性值完成相应操作，如图

6-6

所示。

图

6

-

6

：采用了默认属性值的Summary组件

采用了默认属性后可以提高组件的灵活性，并且可以防止用户未明确声明每个必须的

属性时发生错误。

自定义属性验证

React

内置的验证机制非常适合确保用户所需变量类型的正确性。不过有些情况下需

要更强大的验证功能才能满足需要。比如用户需要确保某个数字是属于特定区间的，

或者某个参数值包含特定字符串。针对这种情况，

React

提供了一种方法允许用户构

建自己的验证机制。

React

中的自定义验证机制是通过一个函数来实现的。该函数既可以在不满足特定验

证条件时返回一个错误，也可以在属性通过验证后返回一个

null

值。

对于基本的属性类型验证，我们只能基于一种条件验证一个属性。不过幸运的是，

自定义属性验证允许用户以多种方式对属性进行验证。在自定义函数中，我们首先

会验证该属性值是否是字符串类型。然后将其长度限制在

20

个字符以内（参见示例

6-1

）。

示例

6-1

：自定义属性验证

propTypes: {

ingredients: PropTypes.number,

steps: PropTypes.number, ...