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 表并在行部分中包含 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

输出

最后，打开浏览器并在地址栏中输入 http://localhost:3000 并按 Enter。