Props 傳遞屬性

從這個例子來看，這三個吉他的卡片屬於同一個 Component，但是圖片、品名跟價格都不一樣，這時候可以利用 Props 來傳遞，將內容傳下去給 Component，以達到同樣組件但不同內容的效果。

［任務解題］

現在 React 熱炒店要把新的菜色給放上菜單，我們將 Component 加上 props，

分別是 name 跟 price

App.js

import List from "./components/List";

function App() {
  return (
    <div className="App">
      <h1>React 熱炒店</h1>
      <ul>
        <List name="蘆筍沙拉" price={100} />
        <List name="辣炒空心菜" price={120} />
        <List name="雞蛋豆腐" price={150} />
      </ul>
    </div>
  );
}

export default App;

name、 price 會當成 props 傳到下層的 Component

props 傳字串直接使用引號，如果傳其他型態要使用大括號 {}

components/List.js

const List = (props) => {
  const { name, price } = props;
  return (
    <li>
      <span>{name}</span>
      <span>${price}</span>
    </li>
  );
}

export default List;

props 會當成參數傳入，再將 name、price 解構出來就可以直接使用囉！

很開心我們現在有三道菜了～～～～

Props 設定預設值

在解構 props 傳入預設值，如果上層沒設定屬性，將會顯示預設值

components/List.js

const List = (props) => {
  const { name, price = 50 } = props;
  return (
    <li>
      <span>{name}</span>
      <span>${price}</span>
    </li>
  );
}

export default List;

我們在 price 的地方，給了 50 的預設值

App.js

import List from "./components/List";

function App() {
  return (
    <div className="App">
      <h1>React 熱炒店</h1>
      <ul>
        <List name="蘆筍沙拉" price={100} />
        <List name="辣炒空心菜" price={120} />
        <List name="雞蛋豆腐" />
      </ul>
    </div>
  );
}

export default App;