【 React新手村】 React Props-Part.1

原文發表於 Medium。

當你開始學習 React 時，理解 “props” 的概念是很重要的。本文將為初學者解釋 props 的意義和用法，並提供範例來幫助你更好地理解。

Props — 父子組件之間傳遞資料的利器

在正式討論props之前，我們來談一下在 React 中，最厲害的功能之一 ：模組化架構，使用下面的這兩段程式碼來說明：

我們製作了一個ChildComponent.jsx來作為可重複使用的組成元素，我們稱它為組件（Component），然後在index.jsx中導入，直接像<div>或<h1>等html元素一樣，直接在React Fucnction的return值中使用，成為伺服器渲染頁面的一部分：

//父組件
//index.jsx
import React from ‘react’;
import ChildComponent from ‘./ChildComponent’; //匯入子組件

function ParentComponent() {  
  return (  
    <div>  
      <ChildComponent/>  
      <ChildComponent/>  
    </div>  
  );  
}  
  
export default ParentComponent;

//子組件（在同個資料夾中創建的jsx檔，取名如下）
//ChildComponent.jsx
import React from 'react';

function ChildComponent(props) {  
  return (  
    <div>  
      <h2>NO.1,John.</h2>  
      <p>20 years old.</p>  
    </div>  
  );  
}  
  
export default ChildComponent;

當ChildComponent在父組件中重複出現了幾次，頁面就會有幾個ChildComponent的內容，因此我們在應該會看到如下這樣的結果：

頁面呈現模樣：重複的子元件

但是，重複同個資料多次通常沒有什麼意義，假設我有一串客戶的資料，若希望這些資料在畫面上呈現的樣子就像一張張名片一樣，用同一個形式同時呈現，我們就需要修改一下內容。

子元件改寫如下：

//子組件
//ChildComponent.jsx
import React from 'react';

function ChildComponent(props) {  
  return (  
    <div>  
      <h2>NO.1,{props.name}.</h2>  
      <p>{props.age} years old.</p>  
    </div>  
  );  
}  
  
export default ChildComponent;

在React函式中返回的頁面內容中，我們使用{花括號}來代表這邊未來有需要呈現的值，但目前還沒有。然後花括號中的東西就指向一個值，可以是一個變數，也可以是一個運算式（例如 2–1*3），而此處我們就把這名字跟年齡這兩個會變動的值指向props.name跟props.age這兩個東西（props指向函式的入參值）。

接下來總算可以正式說明function的參數：props。

“props” 是一種用於傳遞數據從一個組件到另一個組件的機制。它是 “properties” 的縮寫，可用於向 React 組件傳遞數據，使組件能夠根據這些數據進行渲染和行為。

“props” 是一種用於傳遞數據從一個組件到另一個組件的機制。它是 “properties” 的縮寫，可用於向 React 組件傳遞數據，使組件能夠根據這些數據進行渲染和行為。

簡單來說它代表著從上層父組件傳來的一整包資料，它在父組件輸入子組件時是長這樣：

//父組件
//index.jsx
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {  
  return (  
    <div>  
      <ChildComponent name="John" age="20"/>  
    </div>  
  );  
}  
  
export default ParentComponent;

在 React 中，當你創建一個組件時，你可以定義該組件接受的 props。你可以通過組件的屬性（attributes）來傳遞 props。

在 React 中，當你創建一個組件時，你可以定義該組件接受的 props。你可以通過組件的屬性（attributes）來傳遞 props。

因此在子組件嵌入到父組件的標籤上，加入具有特殊命名的屬性(Attribute)，例如我把要輸入名字的地方命名為name，年齡資料的輸入處命名為age。對應到子元素就成了props.name跟props.age。補充一下，子組件針對props資料的使用也有個看起來比較高級的寫法：

我們先來改寫子元件的內容：
//子組件
//ChildComponent.jsx
import React from 'react';

function ChildComponent({name,age}) {  
  return (  
    <div>  
      <h2>NO.1,{name}.</h2>  
      <p>{age} years old.</p>  
    </div>  
  );  
}  
  
export default ChildComponent;

利用ES6的特殊語法-解構賦值 (Destructuring assignment)會讓程式碼更加簡潔。

此處兩種使用props的方法都可以，其實沒有哪個比較好，因為在較大型的單個組件中，保留props的字樣在行間，其實對人眼來說辨識度比較高。當然以現在VS Code等編輯器大行其道，以解構賦值來使用props時，辨識程式碼也是相當輕鬆的。

此處兩種使用props的方法都可以，其實沒有哪個比較好，因為在較大型的單個組件中，保留props的字樣在行間，其實對人眼來說辨識度比較高。當然以現在VS Code等編輯器大行其道，以解構賦值來使用props時，辨識程式碼也是相當輕鬆的。

當子組件完成之後，我們就可非常簡單地重複使用子組件了。

//父組件
//index.jsx
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {  
  return (  
    <div>  
      <ChildComponent name="John" age="20"/>  
      <ChildComponent name="Billy" age="18"/>  
      <ChildComponent name="Mary" age="30"/>  
    </div>  
  );  
}  
  
export default ParentComponent;

頁面畫面：多重資料的渲染效果

最後來談談Props的一個重要特性：唯讀。

//子組件
//ChildComponent.jsx
import React from 'react';

function ChildComponent(props) {  
  props.name="Jill" //這是沒有用的  
  return (  
    <div>  
      <h2>NO.1,{props.name}.</h2>  
      <p>{props.age} years old.</p>  
    </div>  
  );  
}  
  
export default ChildComponent;

我們並沒有辦法修改props的值，所以上述props.name=”Jill”的操作是無效的。

在 React 中，props 是不可變的（immutable）。這意味著一旦你傳遞了 props 給一個組件，該組件就無法更改這些 props 的值。這種限制確保了組件在相同的 props 下保持一致的行為，從而提高了應用的可靠性和可維護性。

在 React 中，props 是不可變的（immutable）。這意味著一旦你傳遞了 props 給一個組件，該組件就無法更改這些 props 的值。這種限制確保了組件在相同的 props 下保持一致的行為，從而提高了應用的可靠性和可維護性。

當然，Props的特性還有很多，足夠我講很多篇，寫到這裡，我打算把文章標題加上Part.1的標示，我們下次再來談Props啦。