React JS #4 | Props (屬性)

undefined on Tenor

React Props：元件溝通的橋樑

在 React 的世界裡，元件 (Component) 就像一個個獨立的個體，各自負責 UI 的一部分，要讓這些個體協同工作，就需要一種溝通的機制，而 Props 就是組件之間通信和數據傳遞的主要方式。

什麼是 Props？

Props 是從父元件傳遞到子元件的資料。

Props 的作用有...

• 傳遞資料：父元件可以透過 props 向子元件傳遞資料，讓子元件根據資料來渲染。
• 配置行為：父元件可以透過 props 向子元件傳遞函式，讓子元件在特定的事件發生時呼叫這些函式。
• 實現客製化： 父元件可以透過 props 來控制子元件的外觀和行為，使其更具彈性。

Props 的傳遞方式

傳遞Props：

// 父組件
<ChildComponent name="John" age={30} />

接收Props：

// 子組件 (ChildComponent)
function ChildComponent(props) {
  return <div>{props.name} is {props.age} years old.</div>;
}

// 也可以這樣寫
​function ChildComponent({name ,age}) {
  return <div>{name} is {age} years old.</div>;
}

Props 的不可變性

Props 具有不可變性，子元件不能直接修改 props 的值。

如果子元件需要修改資料，應該透過呼叫父元件傳遞的函式來通知父元件，由父元件來更新資料。

（這是單向資料流的重要原則，有助於維護程式碼的清晰性和可預測性。）

總結

React Props 是元件之間溝通的橋樑，資料傳遞的信使。透過 Props，父元件可以向子元件傳遞資料、配置子元件的行為、實現元件的客製化。