ReactJS – 组件集合

Posted on by

在现代应用程序中，开发人员会遇到很多情况，其中项目列表（例如待办事项、订单、发票等）必须以表格格式或图库格式呈现。React 提供了清晰、直观和简单的技术来创建基于列表的用户界面。React 使用两个现有功能来完成此功能。

  • JavaScript 的内置map方法。
  • 在 jsx 中反应表达式。

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>

让我们应用这个概念来创建一个组件，以表格格式显示费用条目的集合。

在您喜欢的编辑器中打开我们的费用管理器应用程序。

接下来，在src/components文件夹中创建一个文件ExpenseEntryItemList.css以包含组件的样式。

接下来，在src/components文件夹中创建一个文件ExpenseEntryItemList.js来创建ExpenseEntryItemList组件

接下来，导入 React 库和样式表。

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

接下来，创建ExpenseEntryItemList类并调用构造函数。

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

接下来，创建一个渲染函数。

render() { 
}

接下来，使用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标识每一行，并且它在列表中必须是唯一的。

接下来，在render()方法中，创建一个 HTML 表并将列表表达式包含在行部分中。

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并导入我们新创建的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" }
]

接下来，通过项目属性传递项目来使用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并为表格添加样式。

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，回车。

Item数量日期类别
Pizza80Sat Oct 10 2020Food
Grape Juice30Man Oct 12 2020Food
Cinema210Fri Oct 16 2020Entertainment
Java Programming book242Thu Oct 15 2020Academic
Mango Juice35Fri Oct 16 2020Food
Dress2000Sun Oct 25 2020Cloth
Tour2555Thu Oct 29 2020Entertainment
Meals300Fri Oct 30 2020Food
Mobile3500Mon Nov 02 2020Gadgets
Exam Fees1245Wed Nov 04 2020Academic

推荐阅读：