React-[入門篇]- 渲染列表 (rendering lists) |解構props寫法


渲染列表這個動作會在React做超過百次以上,接下來就簡單介紹這個用法:

渲染列表

什麼時候會使用到渲染列表??當我們有一個陣列資料,我們想要為陣列中的每個元素製作一個元件,例如:

我們有一個pizza的食譜資料,想為每一個食譜製作一個卡片,就像pizza店裡面的菜單顯示的那樣

先前是用重複地寫上Pizza的元件標籤給予不同的資料:

但以資料量來說,以這種半手工的方法,賣20種pizza就要手動寫入20個資料,也是挺費時的,這樣即使有props,但在Menu元件中要寫入的東西仍還是太繁雜了

所以現在要挑戰的就是:動態的渲染列表!也就是All At Once!

JavaScript .map() return 新陣列


結果出爐:

將上面的寫法結合props

可以知道在渲染列表的動作中,也就是map的回調函式中參數pizza,等同於是pizzaData陣列中的一筆物件資料
也可以就是直接在Pizza的元件標籤中寫上pizzaObj的props屬性,將每一筆物件資料作為其值:

回傳結果都有正確顯示出來,但出現一個紅字狀態:

也就是說我們所做的渲染列表的動作之後,有一個規則就是要給每一筆列表資料獨一無二的key值,做資料識別用

解構props

因爲每次都要在Pizza元件裡面寫入資料:{props.pizzaObj.name}
Js有物件解構的寫法:

const person = { firstName: 'John', lastName: 'Doe' };

const { firstName, lastName } = person;

console.log(firstName); // 輸出:John
console.log(lastName);  // 輸出:Doe

這裡以props解釋一下,當你想要解構嵌套的物件時,你可以使用嵌套的物件解構語法。以下是解構 props 物件中的 pizzaObj :

const props = {
   pizzaObj: {
       name: "pizza funghi",
       price: 13,
       ingredients: "jjjj"
   }
};

const { pizzaObj } = props; //這裡就是下面圖片參數寫法
const { name, price, ingredients } = pizzaObj;

console.log(name);        // 輸出:pizza funghi
console.log(price);       // 輸出:13
console.log(ingredients);  // 輸出:jjjj

更改一下HTML的標籤更接近語義化並加入css








你可能感興趣的文章

F2E合作社|卡片組件|Bootstrap 5網頁框架開發入門

F2E合作社|卡片組件|Bootstrap 5網頁框架開發入門

React-[入門篇]- JSX聲明式語法

React-[入門篇]- JSX聲明式語法

[Docker] 基本語法紀錄

[Docker] 基本語法紀錄






留言討論