阅读量:0
在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函数，并传入对应的索引。
