Props 是什麼

用生活中的例子來說，Props 可以用球來作為說明範例

在 React 中，我們會用 Props 來傳遞參數，好讓其他的元件也能夠使用

Props 的特性

Props 其實是一種物件，它有幾個特性，我們待會寫 code 也會一併帶到

1. 是 React 中的關鍵字，代表著屬性
2. 單向的傳遞模式，只能由父層傳遞給子層
3. 只能讀，不可修改、刪除

既然我們大概認識它了，我們就來看一下該怎麼使用吧

Props 應用

Step1. 先來做一個 function component

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

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Step2. 做一個子層，假設我們用不同語言說出 Hello, world!

我們使用 World 元件導入

const World = () => {
  return (
    <p>
      In Taiwan, we say 你好
    </p>
  );
};

function App() {
  return (
    <div className="App">
      <World />
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

切換到瀏覽器的畫面就會是

但國家跟招呼語言都寫死，我們怎麼彈性調整？

這時候 Props 就派上用場了

Step3. 利用 Props 傳遞參數給子元件

const World = ({ country, translation }) => {
  return (
    <p>
      In {country}, we say {translation}
    </p>
  );
};

function App() {
  return (
    <div className="App">
      <World country="Japan" translation="こんにちは" />
      <World country="Taiwan" translation="你好" />
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

這時候我們的畫面就會依照 Props 去渲染出不一樣的訊息

一開始對於 Props 真的有點混亂，不過自己試著寫一遍，並且去理解之後，就會發現它其實不難懂喔