温馨提示×

React中怎么动态添加和删除元素

小亿
245
2024-01-19 17:33:29
栏目: 编程语言

在React中,可以通过使用状态来动态添加和删除元素。

要动态添加元素,可以在组件的状态中定义一个数组,然后使用setState方法来更新数组。例如,假设有一个组件需要动态添加一个列表项:

import React, { useState } from 'react'; function MyComponent() { const [list, setList] = useState([]); const addItem = () => { setList([...list, 'New Item']); }; return ( <div> <button onClick={addItem}>Add Item</button> <ul> {list.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> </div> ); } export default MyComponent; 

上述代码中,list是一个状态数组,addItem函数用于在点击按钮时向list数组中添加一个新的项。在渲染部分,使用map方法遍历list数组来生成列表项。

要动态删除元素,可以通过使用filter方法来过滤掉需要删除的元素。例如,假设有一个组件需要动态删除一个列表项:

import React, { useState } from 'react'; function MyComponent() { const [list, setList] = useState(['Item 1', 'Item 2', 'Item 3']); const removeItem = (index) => { setList(list.filter((item, i) => i !== index)); }; return ( <div> <ul> {list.map((item, index) => ( <li key={index}> {item} <button onClick={() => removeItem(index)}>Remove</button> </li> ))} </ul> </div> ); } export default MyComponent; 

上述代码中,removeItem函数接受一个索引参数,然后使用filter方法来过滤掉对应索引的项,更新list数组。在渲染部分,每个列表项后面都有一个删除按钮,点击按钮时调用removeItem函数,并传入对应的索引。

0