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

npm start

输出

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

项目 量 日期 类别
Pizza 80 Sat Oct 10 2020 Food
Grape Juice 30 Man Oct 12 2020 Food
Cinema 210 Fri Oct 16 2020 Entertainment
Java Programming book 242 Thu Oct 15 2020 Academic
Mango Juice 35 Fri Oct 16 2020 Food
Dress 2000 Sun Oct 25 2020 Cloth
Tour 2555 Thu Oct 29 2020 Entertainment
Meals 300 Fri Oct 30 2020 Food
Mobile 3500 Mon Nov 02 2020 Gadgets
Exam Fees 1245 Wed Nov 04 2020 Academic
本页
上一页
下一页