ReactJS - 元件集合

---

---

在現代應用程式中，開發人員會遇到很多需要以表格格式或畫廊格式渲染專案列表（例如待辦事項、訂單、發票等）的情況。React 提供了清晰、直觀且易於使用的技術來建立基於列表的使用者介面。React 使用兩個現有功能來實現此功能。

• JavaScript 內建的 map 方法。
• jsx 中的 React 表示式。

Map 方法

map 函式接受一個集合和一個對映函式。map 函式將應用於集合中的每個專案，並將結果用於生成一個新的列表。

例如，宣告一個包含 5 個隨機數的 JavaScript 陣列，如下所示 -

let list = [10, 30, 45, 12, 24]

現在，應用一個匿名函式，該函式將其輸入加倍，如下所示 -

result = list.map((input) => input * 2);

然後，生成的列表為 -

[20, 60, 90, 24, 48]

為了重新整理 React 表示式，讓我們建立一個新變數併為其賦值一個 React 元素。

var hello = <h1>Hello!</h1> 
var final = <div>{helloElement}</div>

現在，React 表示式 hello 將與 final 合併並生成，

<div><h1>Hello!</h1></div>

示例

讓我們應用此概念來建立一個元件，以表格格式顯示費用條目專案的集合。

步驟 1 - 在您喜歡的編輯器中開啟我們的 expense-manager 應用程式。

在 src/components 資料夾中建立一個 ExpenseEntryItemList.css 檔案以包含元件的樣式。

在 src/components 資料夾中建立另一個檔案 ExpenseEntryItemList.js 以建立 ExpenseEntryItemList 元件

步驟 2 - 匯入 React 庫和樣式表。

import React from 'react'; 
import './ExpenseEntryItemList.css';

步驟 3 - 建立 ExpenseEntryItemList 類並呼叫建構函式。

class ExpenseEntryItemList extends React.Component {  
   constructor(props) { 
      super(props); 
   } 
}

建立 render() 函式。

render() { 
}

步驟 4 - 使用 map 方法生成 HTML 表格行的集合，每個表格行代表列表中的單個費用條目專案。

render() {
   const lists = this.props.items.map( (item) => 
      <tr key={item.id}>
         <td>{item.name}</td>
         <td>{item.amount}</td>
         <td>{new Date(item.spendDate).toDateString()}</td>
         <td>{item.category}</td>
      </tr>
   );
}

這裡，key 標識每一行，並且在列表中必須是唯一的。

步驟 5 - 接下來，在 render() 方法中，建立一個 HTML 表格並在 rows 部分包含 lists 表示式。

return (
   <table>
      <thead>
         <tr>
            <th>Item</th>
            <th>Amount</th>
            <th>Date</th>
            <th>Category</th>
         </tr>
      </thead>
      <tbody>
         {lists}
      </tbody>
   </table>
);

最後，匯出元件。

export default ExpenseEntryItemList;

現在，我們已經成功建立了將費用專案渲染到 HTML 表格中的元件。完整的程式碼如下 -

import React from 'react';
import './ExpenseEntryItemList.css'

class ExpenseEntryItemList extends React.Component {
   constructor(props) {
      super(props);
   }
   render() {
      const lists = this.props.items.map( (item) => 
         <tr key={item.id}>
            <td>{item.name}</td>
            <td>{item.amount}</td>
            <td>{new Date(item.spendDate).toDateString()}</td>
            <td>{item.category}</td>
         </tr>
      );
      return (
         <table>
            <thead>
               <tr>
                  <th>Item</th>
                  <th>Amount</th>
                  <th>Date</th>
                  <th>Category</th>
               </tr>
            </thead>
            <tbody>
               {lists}
            </tbody>
         </table>
      );
   }
}
export default ExpenseEntryItemList;

index.js

開啟 index.js 並匯入我們新建立的 ExpenseEntryItemList 元件。

import ExpenseEntryItemList from './components/ExpenseEntryItemList'

接下來，在 index.js 檔案中宣告一個列表（費用條目專案）並使用一些隨機值填充它。

const items = [
   { id: 1, name: "Pizza", amount: 80, spendDate: "2020-10-10", category: "Food" },
   { id: 1, name: "Grape Juice", amount: 30, spendDate: "2020-10-12", category: "Food" },
   { id: 1, name: "Cinema", amount: 210, spendDate: "2020-10-16", category: "Entertainment" },
   { id: 1, name: "Java Programming book", amount: 242, spendDate: "2020-10-15", category: "Academic" },
   { id: 1, name: "Mango Juice", amount: 35, spendDate: "2020-10-16", category: "Food" },
   { id: 1, name: "Dress", amount: 2000, spendDate: "2020-10-25", category: "Cloth" },
   { id: 1, name: "Tour", amount: 2555, spendDate: "2020-10-29", category: "Entertainment" },
   { id: 1, name: "Meals", amount: 300, spendDate: "2020-10-30", category: "Food" },
   { id: 1, name: "Mobile", amount: 3500, spendDate: "2020-11-02", category: "Gadgets" },
   { id: 1, name: "Exam Fees", amount: 1245, spendDate: "2020-11-04", category: "Academic" }
]

透過 items 屬性傳遞專案來使用 ExpenseEntryItemList 元件。

ReactDOM.render(
   <React.StrictMode>
      <ExpenseEntryItemList items={items} />
   </React.StrictMode>,
   document.getElementById('root')
);

index.js 的完整程式碼如下 -

import React from 'react';
import ReactDOM from 'react-dom';
import ExpenseEntryItemList from './components/ExpenseEntryItemList'

const items = [
   { id: 1, name: "Pizza", amount: 80, spendDate: "2020-10-10", category: "Food" },
   { id: 1, name: "Grape Juice", amount: 30, spendDate: "2020-10-12", category: "Food" },
   { id: 1, name: "Cinema", amount: 210, spendDate: "2020-10-16", category: "Entertainment" },
   { id: 1, name: "Java Programming book", amount: 242, spendDate: "2020-10-15", category: "Academic" },
   { id: 1, name: "Mango Juice", amount: 35, spendDate: "2020-10-16", category: "Food" },
   { id: 1, name: "Dress", amount: 2000, spendDate: "2020-10-25", category: "Cloth" },
   { id: 1, name: "Tour", amount: 2555, spendDate: "2020-10-29", category: "Entertainment" },
   { id: 1, name: "Meals", amount: 300, spendDate: "2020-10-30", category: "Food" },
   { id: 1, name: "Mobile", amount: 3500, spendDate: "2020-11-02", category: "Gadgets" },
   { id: 1, name: "Exam Fees", amount: 1245, spendDate: "2020-11-04", category: "Academic" }
]
ReactDOM.render(
   <React.StrictMode>
      <ExpenseEntryItem item={item} />
   </React.StrictMode>,
   document.getElementById('root')
);

ExpenseEntryItemList.css

開啟 ExpenseEntryItemList.css 併為表格新增樣式。

html {
  font-family: sans-serif;
}
table {
   border-collapse: collapse;
   border: 2px solid rgb(200,200,200);
   letter-spacing: 1px;
   font-size: 0.8rem;
}
td, th {
   border: 1px solid rgb(190,190,190);
   padding: 10px 20px;
}
th {
   background-color: rgb(235,235,235);
}
td, th {
   text-align: left;
}
tr:nth-child(even) td {
   background-color: rgb(250,250,250);
}
tr:nth-child(odd) td {
   background-color: rgb(245,245,245);
}
caption {
   padding: 10px;
}

使用 npm 命令啟動應用程式。

npm start

輸出

最後，開啟瀏覽器並在位址列中輸入 https://:3000 並按回車鍵。