跟着阮一峰老师的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类型即可显示出来。
1795
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
