您的位置：首页 > Web前端 > React

React之PropTypes属性

2017-07-17 19:14 465 查看

跟着阮一峰老师的react走了一遍发现其中一个demo会有报错。

<!DOCTYPE html>

<html>

<head>

<script src="../build/react.js"></script>

<script src="../build/react-dom.js"></script>

<script src="../build/browser.min.js"></script>

</head>

<body>

<div id="example"></div>

<script type="text/babel">

var data = 123;

var MyTitle = React.createClass({

propTypes: {

title: React.PropTypes.string.isRequired,

},

render: function() {

return <h1> {this.props.title} </h1>;

}

});

ReactDOM.render(

<MyTitle title={data} />,

document.getElementById('example')

);

</script>

</body>

</html>

报错如下：

Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.

组件类的 PropTypes属性，就是验证组件实例的属性是否符合要求，这里的data属性是number，如果改成就不会报错。

propTypes: {

title: React.PropTypes.number.isRequired,

},

如果不改React.PropTypes.string.isRequired,更改data如下，机会抛出错误、

var data = 12ff3;

错误：

Uncaught SyntaxError: embedded: Identifier directly after number (3:19)

1 |

2 |

> 3 | var data = 12ff3;

| ^

4 |

5 | var MyTitle = React.createClass({

6 | propTypes: {

data 无法显示出来

需要将var data = '12ff3'；加上引号转成string类型即可显示出来。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航