隨著應(yīng)用的日益變大标捺，保證組件的正確使用顯得日益重要芳悲，為此引入React.propTypes：react.PropTypes 提供很多驗證器來驗證傳入數(shù)據(jù)的有效性，當(dāng)向props傳入無效數(shù)據(jù)時，JavaScript 控制臺會拋出警告掷邦。
注意為了性能考慮，只在開發(fā)環(huán)境驗證 propTypes椭赋。
一抚岗、聲明props為指定的js基本類型，可傳可不傳哪怔。
1宣蔚、React.PropTypes.array
正確示范：
var MyBox = React.createClass({
propTypes: {
name: React.PropTypes.array.isRequired
},
render: function() {
return (
<div>{this.props.name}</div>
);
}
});
ReactDOM.render(
<MyBox name={["Alice", 30, true]} />,
document.getElementById('timeBox')
);
2、React.PropTypes.bool
正確示范：
var MyBox = React.createClass({
propTypes: {
student: React.PropTypes.bool.isRequired
},
render: function() {
return (
<div>{this.props.student ? "Hello, react!" : "Sorry!"}</div>
);
}
});
ReactDOM.render(
<MyBox student={true} />,
document.getElementById('timeBox')
);
注意：<div>{this.props.student}</div> 渲染不出包含true的div认境？胚委？？
3叉信、React.PropTypes.func
正確示范：
var MyBox = React.createClass({
propTypes: {
sayHello: React.PropTypes.func.isRequired
},
render: function() {
this.props.sayHello();
return (
<div>Hello, react!</div>
);
}
});
ReactDOM.render(
<MyBox sayHello={function sayHello() {console.log("Hello, react!");}} />,
document.getElementById('timeBox')
);
4亩冬、React.PropTypes.number
正確示范：
var MyBox = React.createClass({
propTypes: {
age: React.PropTypes.number.isRequired
},
render: function() {
return (
<div>{this.props.age}</div>
);
}
});
ReactDOM.render(
<MyBox age={23} />,
document.getElementById('timeBox')
);
5、React.PropTypes.object
正確示范：
var MyBox = React.createClass({
propTypes: {
family: React.PropTypes.object.isRequired
},
render: function() {
return (
<div>{this.props.family.mother} & {this.props.family.father}</div>
);
}
});
ReactDOM.render(
<MyBox family={{mother: "Alice", father: "Bruce"}} />,
document.getElementById('timeBox')
);
6硼身、React.PropTypes.string
正確示范：
var MyBox = React.createClass({
propTypes: {
name: React.PropTypes.string.isRequired
},
render: function() {
return (
<div>{this.props.name}</div>
);
}
});
ReactDOM.render(
<MyBox name="Alice" />,
document.getElementById('timeBox')
);
7硅急、React.PropTypes.symbol
var MyBox = React.createClass({
propTypes: {
name: React.PropTypes.symbol.isRequired
},
render: function() {
var obj = {
[this.props.name]: "Alice"
}
return (
<div>{obj[this.props.name]}</div>
);
}
});
ReactDOM.render(
<MyBox name={Symbol()} />,
document.getElementById('timeBox')
);
二、聲明props為數(shù)字佳遂、字符串铜秆、DOM 元素或包含這些類型的數(shù)組或fragment。
React.PropTypes.node
正確示范：
var MyBox = React.createClass({
propTypes: {
children: React.PropTypes.node.isRequired
},
render: function() {
return (
<div>{this.props.children}</div>
);
}
});
ReactDOM.render(
<MyBox>
[<span>Hello, react!</span>, 30, "Alice"]
</MyBox>,
document.getElementById('timeBox')
);
錯誤示范：
var MyBox = React.createClass({
propTypes: {
children: React.PropTypes.node.isRequired
},
render: function() {
return (
<div>{this.props.children}</div>
);
}
});
ReactDOM.render(
<MyBox>
{true}
</MyBox>,
document.getElementById('timeBox')
);
三讶迁、聲明props為React元素（原生HTML元素或React類）
React.PropTypes.element
正確示范：
var MyBox = React.createClass({
propTypes: {
children: React.PropTypes.element.isRequired
},
render: function() {
return (
<div>{this.props.children}</div>
);
}
});
var Children = React.createClass({
render: function() {
return (
<span>Hello</span>
);
}
});
ReactDOM.render(
<MyBox>
<div>
<Children />
<span> React</span>
</div>
</MyBox>,
document.getElementById('timeBox')
);
錯誤示范：
var MyBox = React.createClass({
propTypes: {
children: React.PropTypes.element.isRequired
},
render: function() {
return (
<div>{this.props.children}</div>
);
}
});
var Children = React.createClass({
render: function() {
return (
<span>Hello</span>
);
}
});
ReactDOM.render(
<MyBox>
<Children />
<span> React</span>
</MyBox>,
document.getElementById('timeBox')
);
四连茧、聲明props為某個指定的類
React.PropTypes.instanceOf(MyBox)
var MyBox = React.createClass({
propTypes: {
children: React.PropTypes.instanceOf(Array)
},
render: function() {
return (
<div>{this.props.children}</div>
);
}
});
ReactDOM.render(
<MyBox>
{[1, 2, 3]}
</MyBox>,
document.getElementById('timeBox')
);
注意：指定的類不能是自定義的React類
五、聲明props為某些指定值中的一個（用enum的方式）
React.PropTypes.oneOf(['Alice', 'Bruce'])
錯誤示范：
var MyBox = React.createClass({
propTypes: {
name: React.PropTypes.oneOf(['Alice', 'Bruce'])
},
render: function() {
return (
<div>{this.props.name}</div>
);
}
});
ReactDOM.render(
<MyBox name="Cindy" />,
document.getElementById('timeBox')
);
六巍糯、聲明props為某些類型中的一個
React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number, ...])
錯誤示范：
var MyBox = React.createClass({
propTypes: {
prop: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number
])
},
render: function() {
return (
<div>{this.props.prop}</div>
);
}
});
ReactDOM.render(
<MyBox prop={true} />,
document.getElementById('timeBox')
);
七啸驯、聲明props為指定類型組成的數(shù)組
React.PropTypes.arrayOf(React.PropTypes.number)
錯誤示范：
var MyBox = React.createClass({
propTypes: {
prop: React.PropTypes.arrayOf(React.PropTypes.number)
},
render: function() {
return (
<div>{this.props.prop}</div>
);
}
});
ReactDOM.render(
<MyBox prop={["Alice", 23, true]} />,
document.getElementById('timeBox')
);
八、聲明props為指定類型的屬性構(gòu)成的對象
React.PropTypes.objectOf(React.PropTypes.number)
錯誤示范：
var MyBox = React.createClass({
propTypes: {
family: React.PropTypes.objectOf(React.PropTypes.string)
},
render: function() {
return (
<div>{this.props.family.mother} & {this.props.family.father}</div>
);
}
});
ReactDOM.render(
<MyBox family={{mother: "Alice", age: 23}} />,
document.getElementById('timeBox')
);
九祟峦、聲明props為特定形狀參數(shù)的對象
React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
})
十罚斗、聲明props為必須的某類型
React.PropTypes.*.isRequired
錯誤示范：
var MyBox = React.createClass({
propTypes: {
name: React.PropTypes.string.isRequired
},
render: function() {
return (
<div>Hello, react!</div>
);
}
});
ReactDOM.render(
<MyBox />,
document.getElementById('timeBox')
);
十一、聲明props為必須的任意類型
React.PropTypes.any.isRequired
錯誤示范：
var MyBox = React.createClass({
propTypes: {
name: React.PropTypes.any.isRequired
},
render: function() {
return (
<div>Hello, react!</div>
);
}
});
ReactDOM.render(
<MyBox />,
document.getElementById('timeBox')
);
參考：http://blog.csdn.net/zhouziyu2011/article/details/70842310
