(2024/04/06更新) 因應React在18後更新了許多不同的語法，更新後的教學之後將陸續放在 新的blog 中，歡迎讀者到該處閱讀，我依然會回覆這邊的提問

這個系列和我在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特性後，我會獨立一篇來整理各階層元件的溝通方式。