iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 8
0
Modern Web

給初入JS框架新手的React.js入門系列 第 8

【React.js入門 - 08】 用props綁定資料

這個系列和我在12屆鐵人賽的React.js系列文,已經在修訂後和深智數位合作出版成實體書,在天瓏開始預購了,想學React的朋友可以參考看看:
https://www.tenlong.com.tw/products/9789860776188?list_name=srh

在上一篇文章中,我們曾經提到:

React component能用跟使用button、div這些元素一樣的方法寫在JSX中

看到這句話,不少的人通常會有這個想法:

我們在使用div、button的時候,常在標籤中加上style、value、onclick這些屬性(attribute)來控制元素,我們可不可以也給我們自製的component一些能控制的attribute呢?

在這樣的想法下,props就產生了。

什麼是props?

在過往,我們常把在下面的程式碼中button的value、id等稱為attribute

<button id="btn" value="hello"> 大家好 </button>

而React把我們自製的component當中所有的attribute和其他用來控制元件的參數(像是button中的文字)整合成一個物件,稱為props。舉例來說:

<App version="4" data="none"/>

在上面的程式碼中,App的props包含了version、data,也就是對App來說,它接到一個像這樣結構的參數:

props:{
    version: "4",
    data: "none"
}

使用props綁定資料

我們接續上一篇的程式碼來學習,基礎使用props的方法:

  1. 首先,我們要給我們自製的App元件一個屬性name,用這個name屬性來指定我們按鍵的名稱。打開src資料夾底下的index.js。把render函式修改為:
    ReactDOM.render( //在App標籤中加入name屬性
        <div>
            <App name="我的名字"/> 
        </div>,
        document.getElementById('root')
    );
    
    
  2. 接著,我們要給App函式加入props參數來接受props。請打開src資料夾底下的App.js。把剛剛的App函式修改為:
    function App(props){ // 在函式參數中加入props
        return(
             <button>大家好</button>
        );
    }
    
  3. 但是這樣我們的App函式只是能夠接收props而已,並沒有在任何地方使用。因此,我們要把回傳的button中的名稱改成我們在index.js中指定給props物件的name:
    function App(props){
        return(
             <button> {props.name} </button> 
             /*修改button標籤中間的內容,注意這裡要使用JSX的{}才能使用js資料*/
        );
    }
    

執行結果就會出現:

props對於component的影響

React component設計的方式為,在下列兩個狀況發生時,reactDOM會進入re-render該component的update程序,更新畫面:

  1. props的值改變時
  2. state的值改變時

我們會在後面提到詳細的update程序以及state是什麼。

使用props綁定資料的資料型態問題

以上是props的基礎使用方法。接下來講個前面提過但還是很容易踩到的坑: JSX語法中的資料型態問題。例如: 在下面的程式碼中,App接到的number和getData都是字串,並不是整數和布林值

<App number="87" getData="true"/>

必須要加上{}才會接到正確的js資料型態,使用變數時也要這樣。

<App number={87} getData={true}/>

props不能被元件自己更改(read-only)

props是唯讀變數,所以在元件中這樣的寫法是錯誤的:

this.props.名稱=值;

小結: 可是我就是想在元件自己這更改props啊?

有的時候我們就是想要在元件自己這更改props,這個時候就要用比較迂迴的做法。我們會在後面講完所有常用component特性後,我會獨立一篇來整理各階層元件的溝通方式。


上一篇
【React.js入門 - 07】 function component
下一篇
【React.js入門 - 09】 用props綁定函式
系列文
給初入JS框架新手的React.js入門31

尚未有邦友留言

立即登入留言