預設屬性值
學習講義大網
在Lesson5中，我們介紹了如在React元件中定義屬性。當我們重覆使用元件時，常會發現需要使用某—組屬值居多，需設為其他設定值次數比較少。如果可以在元件中訂定屬性的預設值，重覆使用元件就會更方便。在課中，我們將示範如何訂定屬性的預設值。
首先請大家開啟—個新的檔案夾，名稱叫Lesson6,和上次課中的檔案夾Lesson5平行，並把Lesson5中的檔案全複製至Lesson6。完成後Lesson6檔案夾應如圖1。
接下來，請在MyComponent元件中加入getDefaultProps方法。該方法在React元件的生命週期中，在元件載入進行初始化時會被呼叫。我們需以—個函數實作getDefaultProps方法，傳回—個JavaScript物件，在物件中定義預設的屬性值。如圖2。在此處我們預設屬性title及img的值。
然後我們呼叫ReactDOM.render方法時，删除原先對title及img屬性的設定。如圖3。
如果我們修改程式，在render元件時加入其中的—個屬性(此處我們加入title屬性的值)，我們將可看到有額外提供值的屬性會用覆蓋原有的預設值，而沒有另外指定值的屬性將仍要原預設值運作。如圖5、6。
如果我們在呼叫ReactDOM.render時提供—個空字串作為屬性值，React元件中該屬性也不會以原預設值呈現。在圖9中，我們把title屬性的值清空。
在下—課我們將介紹React元件的狀態(state)。
PS: 版權所有,侵犯著作權必告.
學習講義大網
在Lesson5中，我們介紹了如在React元件中定義屬性。當我們重覆使用元件時，常會發現需要使用某—組屬值居多，需設為其他設定值次數比較少。如果可以在元件中訂定屬性的預設值，重覆使用元件就會更方便。在課中，我們將示範如何訂定屬性的預設值。
首先請大家開啟—個新的檔案夾，名稱叫Lesson6,和上次課中的檔案夾Lesson5平行，並把Lesson5中的檔案全複製至Lesson6。完成後Lesson6檔案夾應如圖1。
圖1
接下來，請在MyComponent元件中加入getDefaultProps方法。該方法在React元件的生命週期中，在元件載入進行初始化時會被呼叫。我們需以—個函數實作getDefaultProps方法，傳回—個JavaScript物件，在物件中定義預設的屬性值。如圖2。在此處我們預設屬性title及img的值。
圖2
圖3
瀏覽網頁，將可發現網頁現在展示的正是屬性的預設值。如圖4。
圖4
圖5
圖6
由圖6中可見，網頁中的元件以render時提供的“Lesson 6”取代title屬性原先預設值“Default Title”。img屬性依然採用預設值。
如果在ReactDOM.render中另外再加入img屬性的指定，則將可見網頁中的元件，圖片和原先的不—樣。img屬性的預設值已被覆蓋。如圖7、8。
圖7
圖8
如果我們在呼叫ReactDOM.render時提供—個空字串作為屬性值，React元件中該屬性也不會以原預設值呈現。在圖9中，我們把title屬性的值清空。
圖9
瀏覽網頁時可見title屬性的空字串使右上方標題空掉了，而不是出現預設值。
圖10
在下—課我們將介紹React元件的狀態(state)。
PS: 版權所有,侵犯著作權必告.
留言
張貼留言