屬性宣告

因為用React Native建立的自定義元件可以複用, 我們開發過程中可能一個專案組有多個人同時開發,其他同事可能會用到我們自定義的元件, 但是他們使用的時候很容易忘記使用某些屬性,這時候我們應該在自定義元件中宣告一些屬性。

//自定義元件
export default class ConfirmDialog extends Component {
  //....
}
ConfirmDialog.propTypes = {
    userConfirmed: React.PropTypes.func.isRequired,
    userCanceled: React.PropTypes.func.isRequired,
    amIStillAlive: React.PropTypes.func.isRequired,
    promptToUser:React.PropTypes.string.isRequired
};
 

上面宣告的屬性都是 isRequired， 如果不傳遞這些屬性程式會在開發階段出現警告,開發階段需要我們進行屬性確認。

屬性確認

屬性確認只在開發階段有效,上面我們聲明瞭兩種屬性型別確認——func (函式),和string(字串)。下面再來看看屬性確認的語法：
一、要求屬性是JavaScript基本型別

React.PropTypes.array;
React.PropTypes.bool;
React.PropTypes.func;
React.PropTypes.number;
React.PropTypes.object;
React.PropTypes.string;

二、要求屬性是可渲染節點

React.PropTypes.node

要求屬性是某個React元素

React.PropTypes.element

要求屬性是某個指定類的例項

React.PropTypes.instanceOf(NameOfClass)

要求屬性取值為幾個特定的值

React.PropTypes.oneOf(['值1','值2'])

屬性可以為指定型別中的任意一個

React.PropTypes.oneOfType([
    React.PropTypes.node,
    React.PropTypes.string  
])

屬性可以為指定型別的陣列

React.PropTypes
 
.arrayOf(React.PropTypes.number)

要求屬性是一個有指定成員變數的物件
下面的語句要求傳入的物件有一個成員變數是number型別.

React.PropTypes.objectOf(React.PropTypes.number)

要求屬性是一個指定構成方式的物件

React.PropTypes.shape({
      color : React.PropTypes.string,
      fontSize: React.PropTypes.number
})

屬性可以為任意型別

React.PropTypes.any

上面的10種語法,都可以通過在後面加上isRequired宣告它是必需的.

屬性預設值

我們還可以給屬性指定一個預設值,當沒有傳遞該屬性時使用預設值,如:

ConfirmDialog.defaultProps = {
    promptToUser: '確定嗎?'
};

同時記得要將指定 promptToUser為必須的’isRequired’ 去掉.