ReactJS - 组件集合

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

• JavaScript 的内置 map 方法。
• jsx 中的 React 表达式。

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 表达式 你好 将与 final 合并并生成，

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

例

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

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

在 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表，并在行部分包含列表表达式。

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" }
]

通过使用 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 命令启动应用程序。

输出

最后，打开浏览器，在地址栏中输入 http://localhost:3000，然后按回车键。