iT邦幫忙

2022 iThome 鐵人賽

DAY 7
0
Modern Web

你 React 了嗎? 30 天解鎖 React 技能系列 第 7

[DAY 7] props 上面傳下來的屬性

  • 分享至 

  • xImage
  •  

[情境任務]

小當家:各位!我又研發了兩個菜色了~嚐嚐看吧

解師傅:這菜炒得不錯啊!一樣把它們列在菜單上吧~

餐廳有很多不同的菜名跟價格,我們是不是可以利用昨天的組件來做呢


cover

Props 傳遞屬性

example
從這個例子來看,這三個吉他的卡片屬於同一個 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;

nameprice 會當成 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 解構出來就可以直接使用囉!


很開心我們現在有三道菜了~~~~/images/emoticon/emoticon42.gif
props1
codesandbox 程式碼範例

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;

因為上層 <List name="雞蛋豆腐" /> 沒傳入 price 屬性,所以將會顯示預設值
雞蛋豆腐就這樣變50塊了~~

props2
codesandbox 程式碼範例


要賠錢賣了!!忘記標價就會是這種下場啊~~/images/emoticon/emoticon04.gif

結語

利用 props 傳遞不同內容給相同的 Component,達到 Component 複用的效果,明天再來講解要怎麼渲染列表,將資料用迴圈的方式呈現出來,明天見囉!/images/emoticon/emoticon08.gif


本文將同步更新至我的部落格
Lala 的前端大補帖



上一篇
[DAY 6] 建立一個可重複利用的 Component 吧!
下一篇
[DAY 8] React 列表渲染,將陣列、物件渲染成元素
系列文
你 React 了嗎? 30 天解鎖 React 技能30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言