iT邦幫忙

2021 iThome 鐵人賽

DAY 8
2
Modern Web

React.js 30 天學習全記錄系列 第 8

[ Day 08 ] 元件的資料傳遞 - Props

https://ithelp.ithome.com.tw/upload/images/20210907/20134153yNNvDrQjhO.png
Day 06Day 07 中,我們認識了 React.js 的兩個 Components : Function ComponentClass 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>;
}

這樣的寫法就會產生出和上面的範例一模一樣的結果:
https://ithelp.ithome.com.tw/upload/images/20210923/20134153BOGqeE9P9U.png


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


上一篇
[ Day 07 ] Class Component
下一篇
[ Day 09 ] State 是什麼?
系列文
React.js 30 天學習全記錄30

尚未有邦友留言

立即登入留言