Props是什麼

在 React 中，props (properties) 是一個用來傳遞資料給元件的機制
React 的 Component（元件）可以看作是一個函式，而 props 就是這個函式的參數

特性：

單向資料流 (Unidirectional Data Flow)：由父元件傳給子元件
唯讀 (Read-Only)：不能在子元件修改 props

為什麼需要props

• 組合元件：可以把 UI 拆成一個個元件來建構，再把它們組合起來變成完整的頁面
• 資料傳遞：父元件利用 props 將資料傳遞給子元件，讓資料流向更清楚，程式碼也更好維護
• 重複使用元件：同一個元件可以根據不同的輸入，顯示不同的內容或是執行不同的行為

透過Props傳遞資料 (Passing Data via Props)

範例：

父組件
Home.js

import { useState } from "react";
import BlogList from "./BlogList";

const Home = () => {
  const [blogs, setBlogs] = useState([
    { title: "我們生來就是自由的", author:"艾倫", id: 1 },
    { title: "這個世界是很殘酷的，但是也非常美麗", author: "米卡莎", id: 2 },
    { title: "什麼都無法捨棄的人，什麼都改變不了", author:"阿爾敏", id: 3 }
  ])

  return (
    <div className="home">
      <BlogList blogs={ blogs } title="All Blogs" />
    </div>
  );
}
 
export default Home;

子組件
BlogList.js

const BlogList = ({ blogs, title }) => { 

  return (
    <div className="blog-list">
      <h2>{ title }</h2>
      {blogs.map(blog => (
        <div className="blog-preview" key={ blog.id } >
          <h2>{ blog.title }</h2>
          <p>Written by { blog.author }</p>
        </div>
      ))}
    </div>
  );
}
 
export default BlogList;

也可以寫成：

子組件
BlogList.js

const BlogList = ({ props }) => {
 const blogs = props.blogs;
 const title = props.title;

  return (
    <div className="blog-list">
      <h2>{ title }</h2>
      {blogs.map(blog => (
        <div className="blog-preview" key={ blog.id } >
          <h2>{ blog.title }</h2>
          <p>Written by { blog.author }</p>
        </div>
      ))}
    </div>
  );
}
 
export default BlogList;

程式碼解釋：

1. 父元件 (Home) 把 blogs 和 title 傳給子元件 (BlogLists)
2. 子元件 (BlogList) 透過 props 使用這些資料，並顯示在畫面上

瀏覽器執行畫面：

透過Props傳遞函式 (Passing Functions via Props)

範例：

父組件
App.js

import Button from "./Button";

function App() {
  const handleClick = () => {
    alert("Button clicked");
  };
  
  return <Button onClick={handleClick} />;
}

export default App;

子組件
Button.js

const Button = (props) => {
  return <button onClick={props.onClick}>Click me</button>;
};

export default Button;

程式碼解釋：

1. 父元件 (App) 定義 handleClick 這個函式
2. 子元件 (Button) 收到 onClick 這個 props，並在按鈕點擊時呼叫它
3. 最後由父元件 (APP) 負責處理事件邏輯，但觸發的動作是發生在子元件裡

瀏覽器執行畫面：

總結

• 透過Props傳遞資料 (Passing Data via Props)：將父元件的資料傳給子元件，讓同一個元件可以在不同情境下顯示不同內容
• 透過Props傳遞函式 (Passing Functions via Props)：將父元件的函式傳給子元件，讓子元件能回傳事件或觸發父元件的邏輯（例如點擊按鈕）