react Props 验证 propTypes,
Posted 飞旋的留恋
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react Props 验证 propTypes,相关的知识,希望对你有一定的参考价值。
<body>
<!-- React 真实 DOM 将会插入到这里 -->
<div id="example"></div>
<!-- 引入 React -->
<script src="src/libs/react.js"></script>
<!-- 引入 JSX 语法格式转换器 -->
<script src="src/libs/JSXTransformer.js"></script>
<script src="src/libs/jquery.js"></script>
<!-- 注意:script 需要注明 type 为 text/jsx 以指定这是一个 JSX 语法格式 -->
<script type="text/jsx">
var title = "my react";
var MyTitle = React.createClass({
propTypes : {
title:React.PropTypes.string.isRequired,
},
render : function () {
return (
<h1>1111 : {this.props.title}</h1>
)
}
})
React.render(
<MyTitle title={title} />,
document.getElementById(\'example\')
)
</script>
上面是验证正确
下面将title 改成number值 1
Props 验证
Props 验证使用 propTypes,它可以保证我们的应用组件被正确使用,React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时,javascript 控制台会抛出警告。
以下实例创建一个 Mytitle 组件,属性 title 是必须的且是字符串,如果是一个数字则会报错 :
更多验证如下
以上是关于react Props 验证 propTypes,的主要内容,如果未能解决你的问题,请参考以下文章