一定要寫PropTypes,切莫為了省事而不寫
如果一個Props不是requied,一定在getDefaultProps中設置它
React.PropTypes主要用來驗證組件接收到的props是否為正確的數據類型,如果不正確,console中就會出現對應的warning。出於性能方面的考慮,這個API只在開發環境下使用。
基本使用方法:
propTypes: {
myArray: React.PropTypes.array,
myBool: React.PropTypes.bool,
myFunc: React.PropTypes.func,
myNumber: React.PropTypes.number,
myString: React.PropTypes.string,
// You can chain any of the above with `isRequired` to make sure a warning
// is shown if the prop isn't provided.
requiredFunc: React.PropTypes.func.isRequired
}
假如我們props不是以上類型,而是擁有復雜結構的對象怎么辦?比如下面這個:
{
text: 'hello world',
numbers: [5, 2, 7, 9],
}
當然,我們可以直接用React.PropTypes.object,但是對象內部的數據我們卻無法驗證。
propTypes: {
myObject: React.PropTypes.object,
}
進階使用方法:shape() 和 arrayOf()
propTypes: {
myObject: React.PropTypes.shape({
text: React.PropTypes.string,
numbers: React.PropTypes.arrayOf(React.PropTypes.number),
})
}
下面是一個更復雜的Props:
[
{
name: 'Zachary He',
age: 13,
married: true,
},
{
name: 'Alice Yo',
name: 17,
},
{
name: 'Jonyu Me',
age: 20,
married: false,
}
]
綜合上面,寫起來應該就不難了:
propTypes: {
myArray: React.PropTypes.arrayOf(
React.propTypes.shape({
name: React.propTypes.string.isRequired,
age: React.propTypes.number.isRequired,
married: React.propTypes.bool
})
)
}