30天用React打造AI工具箱 Day5

昨天我們認識了Function Component，並且知道它就像是一塊積木。
但如果這塊積木只能顯示固定內容，就會很死板。
今天要介紹的props（properties），就是讓元件能接收外部資料，變得可重複使用的關鍵。

什麼是props？

props可以想像成「元件的參數」。
就像函式可以接參數一樣，React元件也可以透過props接收資料。

// 定義元件時用 props
function Hello(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 使用元件時傳入資料
export default function App() {
  return (
    <div>
      <Hello name="小明" />
      <Hello name="小華" />
    </div>
  );
}

這樣結果就會輸出

Hello, 小明!
Hello, 小華!

解構props

在React中常常會用解構賦值，讓程式碼更簡潔。

// 傳統寫法
function Hello(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 解構 props
function Hello({ name }) {
  return <h1>Hello, {name}!</h1>;
}

這樣就不用寫一堆的props.xx，而是可以直接拿到name。

多個props的環境

元件可以同時接收多個 props。

function UserCard({ name, age }) {
  return (
    <div className="p-4 border rounded mb-2">
      <p>姓名：{name}</p>
      <p>年齡：{age}</p>
    </div>
  );
}

export default function App() {
  return (
    <div className="p-6">
      <UserCard name="小明" age={18} />
      <UserCard name="小華" age={20} />
    </div>
  );
}

這樣可以得到

姓名：小明
年齡：18

姓名：小華
年齡：20

(補充：props是不能修改的，如果要修改資料，我們會用state)