赵走x博客 - 开发者的网上家园

4、组件的propTypes

资源编号:76052 书籍 React快速上手开发热度：83

在你的组件中，可以添加一个名为propTypes 的属性，以声明组件需要接收的属性列表及其对应类型。

下面是一个例子：

```
var Component=React.createClass({
        propTypes:{
          name:Reacr.PropTypes.string.isRequired,  
        },
        render:function () {
            return React.DOM.span(null,'My name is '+this.props.name)
        }
    });
```

虽然也可以不使用propTypes，但是使用propTypes 有以下两方面的好处。
*  通过预先声明组件期望接收的参数，让使用组件的用户不需要在render() 方法的源代码中到处寻找该组件可配置的属性（这可能需要花费很长时间）。
* React 会在运行时验证属性值的有效性。这使得你可以放心编写render() 函数，而不需要对组件接收的数据类型有所顾虑（甚至过分怀疑）。

让我们看看其验证效果。name: React.PropTypes.string.isRequired 清晰地指明了name 属性是一个必须提供的字符串值。假设你忘记传递这个值，会在控制台中得到一个警告信息（如图2-3 所示）：
```
ReactDOM.render(
        React.createElement(Component,{}),
        document.getElementById("app")
    );
```

![bs64](https://img.handsomemark.com/2019/11/09/2bd5744a-02a2-11ea-afff-0242ac140002.png)
图2-3：没有提供必需的属性值时出现的警告信息

如果你提供了一个无效类型的值，当然也会得到警告信息。比如提供的值是整数类型（如图2-4 所示）：
```
ReactDOM.render(
        React.createElement(Component,{name:123}),
        document.getElementById("app")
    );
```
![bs64](https://img.handsomemark.com/2019/11/09/56e111e4-02a2-11ea-9b4c-0242ac140002.png)
图2-4：提供了无效类型的属性值时出现的警告信息

图2-5 列出了PropTypes 的可用属性列表，用于根据具体需求进行选用。

![bs64](https://img.handsomemark.com/2019/11/09/6a692788-02a2-11ea-b12b-0242ac140002.png)
图2-5：所有的React.PropTypes 可用属性

在组件中声明propTypes 是可选的，这也意味着你可以在这里选择列出部分而非所有属性。或许你会觉得不声明所有属性是一个坏主意，但要牢记一点，这种情况在调试他人代码时是有可能遇到的。

### 默认属性值
当你的组件接收可选参数时，你需要特别小心没有提供这些属性的情况，以确保组件在这些情况下正常运行。这难免会导致一些防御性的样板代码产生，比如：
```
var text = 'text' in this.props ? this.props.text : '';
```
可以通过实现getDefaultProps() 方法，避免这种代码的产生（并把关注点放在更重要的地方）：
```
var Component=React.createClass({
        propTypes:{
          name:React.PropTypes.string.isRequired,
        },
        getDefaultProps:function(){
            return{
                name:'mark'
            }
        },
        render:function () {
            return React.DOM.span(null,'My name is '+this.props.name)
        }
    });
    ReactDOM.render(
        React.createElement(Component,{}),
        document.getElementById("app")
    );
```
运行结果：

![bs64](https://img.handsomemark.com/2019/11/09/cbe0a388-02a2-11ea-96e7-0242ac140002.png)