React数据格式验证PropTypes

组件的属性类型如果不进行声明和验证，那么很可能使用者传给你的属性值或者类型是无效的，那会导致一些意料之外的故障。好在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>

React数据格式验证PropTypes

推荐阅读更多精彩内容