React之PropTypes屬性
跟著阮一峰老師的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型別即可顯示出來。