在 Day 06 和 Day 07 中，我們認識了 React.js 的兩個 Components : Function Component 和 Class Component 。
這兩種類型元件的存在，其實都是想要解決開發網站時某些會一直重複使用到的邏輯和畫面。不過，怎麼樣才能依照不同頁面的需求來更彈性的使用元件呢？
今天這篇就是要來告訴大家如何傳遞資料給元件並且活用它！那就一起看下去吧～

何謂 Props ？

在 React.js 中，將元件內自訂的屬性或其他參數整理成一個單一的物件，並將該物件傳遞給元件。而該物件就叫做 Props 。

這個概念乍聽之下好像似懂非懂，沒關係～直接帶大家來看 React 官網的範例：

// 宣告一個 React Element
const element = <Welcome name="Sara" />;

ReactDOM.render(
  element,
  document.getElementById('root')
);

在上面這段程式碼中，我們設定一個 React element 並使用了一個 Welcome 的元件，而且在元件當中帶入了一個自定義的屬性 name 其值為 Sara 。

依照 Props 的定義， name 這個屬性會被包在一個叫做 props 的物件當中，所以可以這樣來看這個物件：

props: {
    name: "Sara"
}

既然 Props 可以將上面的這個物件傳遞到元件內部，那我們就來看看傳進去的資料是怎麼做處理的？

// Function Component <Welcome>
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

上面程式碼中的 Function Component 是我們在 React Element 中所使用的 Welcome 元件 ，並在該元件的函式中帶入了一個 props 的參數，而這個 props 的值就是我們剛剛所傳入的那個物件。
而且在剛剛上方的程式碼中我們也看見 props 這個物件當中確實有一個屬性為 name ，這時候要使用該值的話記得要加上 {} 並且用 props.屬性 來取值。（這個部分如果不清楚的話，可以回去看 Day 05 瞭解一下 JSX 語法的規則喔！）
所以這個範例在 ReactDOM.render() 中就會渲染出 Hello, Sara 這串訊息了！

Props 的注意事項

透過上方的範例我們可以了解到， Props 是可以將父層的資料透過物件的形式傳遞到子層的元件中的。不過在子層的元件內想要去變更 props 物件的值時，就必須要注意了！

Props 是唯獨的

這邊指的唯獨（ read-only ）是代表 props 物件不能在元件內部進行修改。如果我們嘗試在元件內部修改 props 的值，就會產生錯誤訊息的提示了。

備註：上述指的元件包含了 Function Component 和 Class Component

除了自定義的屬性名稱，還有一個 children

在上方的範例中我們有提過，可以在任何的元件中帶入自己定義的屬性至其中，並且當作 props 物件將資料傳入到元件內部。
不過除了自定義的屬性和名稱之外，其實元件還有一個內建的 props 屬性： children

children 怎麼使用？

跟我們上述範例中將自定義的屬性寫在元件標籤裡不一樣， children 的寫法是將該屬性的值直接撰寫在元件的開始與結束標籤內（意即標籤的中間）。

如果使用上面的範例的話，那我們在宣告 element 的地方就要改寫成下方的寫法：

const element = <Welcome> Sara </Welcome>;

而在 Welcome 元件內，則因為我們改使用了 children 的屬性，所以元件內部採用的 props 物件的屬性也會改成 children ：

function Welcome(props) {
  return <h1>Hello, {props.children}</h1>;
}

這樣的寫法就會產生出和上面的範例一模一樣的結果：

那今天對於 Props 的介紹就到這邊告一個段落，明天我們就要進入到 State 狀態的章節囉！
有任何問題還是都非常非常歡迎各位前輩大大們提出和指教唷～
我們下篇見ʘ‿ʘ