React组件,显示一个列表,其中每个列表项都是一个对象的属性,以及一个删除按钮,用于从列表中删除项目,要求代码有详细注释
时间: 2023-12-19 11:05:48 浏览: 31
好的,下面是一个简单的React组件,它显示一个列表,每个列表项都是一个对象的属性,并且有一个删除按钮,用于从列表中删除项目。代码中有详细注释,希望对您有所帮助。
```jsx
import React, { useState } from 'react';
const List = () => {
// 初始状态,一个包含三个对象的数组
const [items, setItems] = useState([
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' },
]);
// 点击删除按钮时调用的函数
const handleDelete = (id) => {
// 根据id过滤掉需要删除的对象,返回新的数组
const newItems = items.filter((item) => item.id !== id);
// 更新状态
setItems(newItems);
};
return (
<div>
<h2>My List</h2>
<ul>
{/* 遍历items数组,返回一个<li>元素 */}
{items.map((item) => (
<li key={item.id}>
{/* 显示对象的name属性 */}
{item.name}
{/* 删除按钮,点击时调用handleDelete函数 */}
<button onClick={() => handleDelete(item.id)}>Delete</button>
</li>
))}
</ul>
</div>
);
};
export default List;
```
这个组件使用了React的Hooks机制,使用`useState`来维护组件的状态。初始状态是一个包含三个对象的数组,每个对象都有一个`id`和`name`属性。当用户点击删除按钮时,会调用`handleDelete`函数,该函数会根据传入的`id`过滤掉需要删除的对象,并返回一个新的数组,然后使用`setItems`更新组件的状态。
在组件的`return`语句中,使用`map`方法遍历`items`数组,返回一个`<li>`元素,其中显示对象的`name`属性,并且包含一个删除按钮,点击时调用`handleDelete`函数。需要注意的是,在`map`方法中需要为每个元素指定一个`key`属性,这样React才能准确地追踪每个元素的变化。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)