元件的屬性props
學習講義大網
首先請大家開啟—個新的檔案夾，名稱叫Lesson5,和上次課中的檔案夾Lesson4平行，並把Lesson4中的檔案全複製至Lesson5。另外請在Lesson5檔案夾内放入兩張圖檔備用。如需要下載圖檔，可至Iconfinder尋找。(Iconfinder URL 為 https://www.iconfinder.com/， 有些圖檔可免費下載)。 我準備的圖檔如圖1。
在本課中，我們介紹React元件的屬性(—般英文文獻中稱為props, 是properties的縮寫)。當我們設
學習講義大網
首先請大家開啟—個新的檔案夾，名稱叫Lesson5,和上次課中的檔案夾Lesson4平行，並把Lesson4中的檔案全複製至Lesson5。另外請在Lesson5檔案夾内放入兩張圖檔備用。如需要下載圖檔，可至Iconfinder尋找。(Iconfinder URL 為 https://www.iconfinder.com/， 有些圖檔可免費下載)。 我準備的圖檔如圖1。
在本課中，我們介紹React元件的屬性(—般英文文獻中稱為props, 是properties的縮寫)。當我們設
圖1
完成後Lesson5檔案夾應如圖2。
圖2
接下来請在body區段内，把id為myApp的div標籖中加入class屬性並設值為container。此為Boostrap的CSS。我們在上一課中已整合Bootstrap的CSS檔，因此可用Bootstrap把畫面稍加美化。同時，因此處並非JSX程式碼，不需使用className取代class。 完成後如圖3。
圖3
下—步請在JSX程式碼中把元件MyComponent的render方法的return內容更改如圖4。
圖4
然後在這兩行中分别放了—個img及h1 HTML標籖。img標韱中圖檔來源由屬性img提供。h1標籖內的的文字由屬性title提供。我們可由React 元件之外使用屬性在元件初始化時傳入元件下。傳入的屬性會出現在this.props下。各位可圖4中看到我們在img標籖src中定的值為this.props.img。 同意，h1中是透過this.props.title取得屬性值。使用屬性值的時候需放有大括號{ } 中。在HTML標籖中使用傳入的元件屬性值時不需加雙引號。
接下來請在ReactDOM物件呼叫render元件時在MyComponent元件中加入title及img屬性值以傳入元件中。title屬性為任意的文字。img屬性值為其中一張圖檔的檔案名稱。請見圖5。
請瀏覽網頁，結果應如圖6。
在圖4中我們用Bootstrap定義了一個列(className定為row)。在該列再定義兩個行(className定為col-xs-2，col-xs-10)。 如需查閱基本的Bootstrap, 請見 http://tysunsblog.blogspot.tw/2015/06/bootstrap.html。
然後在這兩行中分别放了—個img及h1 HTML標籖。img標韱中圖檔來源由屬性img提供。h1標籖內的的文字由屬性title提供。我們可由React 元件之外使用屬性在元件初始化時傳入元件下。傳入的屬性會出現在this.props下。各位可圖4中看到我們在img標籖src中定的值為this.props.img。 同意，h1中是透過this.props.title取得屬性值。使用屬性值的時候需放有大括號{ } 中。在HTML標籖中使用傳入的元件屬性值時不需加雙引號。
接下來請在ReactDOM物件呼叫render元件時在MyComponent元件中加入title及img屬性值以傳入元件中。title屬性為任意的文字。img屬性值為其中一張圖檔的檔案名稱。請見圖5。
圖5
圖6
最後請修改傳入元件的title及img屬性值，其中img屬性值定為另一張圖檔的檔案名稱。修改內容及瀏覽結果應如下方圖7及8。
做到這裏恭喜大家React的認識又向前一步。其實進入屬性值不只是傳遞單純的資料而已。在後續課程中再為大家介紹。
圖7
圖8
做到這裏恭喜大家React的認識又向前一步。其實進入屬性值不只是傳遞單純的資料而已。在後續課程中再為大家介紹。
PS: 版權所有,侵犯著作權必告.
留言
張貼留言