在 Day 8 和 Day 10 的文章已經介紹到 state 和 props 的基本概念

這篇文章主要會說明這兩者的差異以及如何做搭配

State：儲存元件自己擁有的狀態
Props：接收父元件提供的資料

比較

透過 state 與 props 的搭配，元件除了能動態更新，還能重複使用

利用 state 和 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 }
  ])

  const handleDelete = (id)=>{
    const newBlogs = blogs.filter(blog => blog.id !== id);
    setBlogs(newBlogs);
  }

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

BlogList.js

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

  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>
          <button onClick={()=> handleDelete(blog.id)}>Delete</button>
        </div>
      ))}
    </div>
  );
}
 
export default BlogList;

App.js

import Home from './Home';

function App() {
  return (
    <div className="App">
      <div className="content">
        <Home />
      </div>
    </div>
  );
}

export default App;

程式碼解釋：

1. State 更新
   Home 元件透過 setBlogs 更新 state，用 .filter() 移除被刪掉的文章
2. Props 傳遞
   Home 把 handleDelete 函式以 props 的形式傳給 BlogList
   在 BlogList中，點擊Delete按鈕會觸發 handleDelete(blog.id)
3. 元件分工
   Home：負責管理資料與更新（刪除文章）
   BlogList：負責渲染畫面，處理 UI 顯示與互動

瀏覽器執行畫面