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

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