React 組件屬性
## React 組件屬性（Props）
在 React 中，**props（properties）** 是父組件傳遞資料給子組件的方式。
特點：
- Props 由父組件傳給子組件。
- 子組件可以讀取 props，但不應直接修改它。
- Props 可以是字串、數字、布林值、陣列、物件，甚至函式或 JSX。
- 在 JSX 中使用 `屬性名稱={值}` 傳遞資料。
---
## 基本語法
父組件：
```jsx
<子組件 name="小明" age={20} />
```
子組件接收：
```jsx
function 子組件(props) {
return <p>{props.name}</p>;
}
```
也可以使用解構語法：
```jsx
function 子組件({ name, age }) {
return <p>{name}，今年 {age} 歲</p>;
}
```
---
## 範例：傳遞使用者資料
以下範例包含兩個組件：
1. `App`：父組件
2. `UserCard`：子組件
沒有使用者互動，只顯示父組件傳給子組件的資料。
```jsx
function UserCard({ name, age, job }) {
return (
<div>
<h2>使用者資料</h2>
<p>姓名：{name}</p>
<p>年齡：{age}</p>
<p>職業：{job}</p>
</div>
);
}
function App() {
return (
<div>
<h1>我的網站</h1>
<UserCard
name="小明"
age={25}
job="前端工程師"
/>
</div>
);
}
export default App;
```
### 說明
在 `App` 中：
```jsx
<UserCard
name="小明"
age={25}
job="前端工程師"
/>
```
這段程式將三個 props 傳給 `UserCard`：
- `name` 的值是字串 `"小明"`
- `age` 的值是數字 `25`
- `job` 的值是字串 `"前端工程師"`
在 `UserCard` 中：
```jsx
function UserCard({ name, age, job }) {
```
使用解構方式取得這些屬性，之後就能在 JSX 中使用：
```jsx
<p>姓名：{name}</p>
```
注意，字串可以直接寫：
```jsx
name="小明"
```
數字或 JavaScript 表達式則要使用大括號：
```jsx
age={25}
```
相關學習地圖、教學課程
F2E 網站前端工程