组件的属性类型如果不进行声明和验证，那么很可能使用者传给你的属性值或者类型是无效的，那会导致一些意料之外的故障。好在React已经为我们提供了一套非常简单好用的属性校验机制。
React有一个PropTypes属性校验工具，经过简单的配置即可。当使用者传入的参数不满足校验规则时，React会给出非常详细的警告。
需要引入react-with-addons.js
PropTypes包含的校验类型包括基本类型、数组、对象、实例、枚举。
如果某个属性是必须的，在类型后面加上 .isRequired 即可。
作用：使用组件的时候可以明确需要传入的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 核心 -->
<script src="../build/react.min.js"></script>
<!-- 渲染dom -->
<script src="../build/react-dom.min.js"></script>
<!-- 把jsx、es6转换成js、es5 -->
<script src="../build/browser.min.js"></script>
<!--属性校验工具-->
<script src="react-with-addons.js"></script>
</head>
<body>
<div id="root">
</div>
</body>
<script type="text/babel">
var List = React.createClass({
propTypes:{
listData:React.PropTypes.array.isRequired
},
getDefaultProps:function () {
return {
listData:[]
}
},
render:function () {
return (
<ul>
{
this.props.listData.map(function (ele,index) {
return <li key={index}>{ele}</li>
})
}
</ul>
)
}
});
ReactDOM.render(<List listData={[1,2,3,4]}/>,document.getElementById("root"))
</script>
</html>
网友评论