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

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

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

import React, { useState } from 'react';

function MyComponent() {
  const [list, setList] = useState([]);

  const addItem = () => {
    setList([...list, 'New Item']);
  };

  return (
    

      Add Item
      

        {list.map((item, index) => (
          
{item}
        ))}
      
    
  );
}

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 (
    

      

        {list.map((item, index) => (
          

            {item}
             removeItem(index)}>Remove
          
        ))}
      
    
  );
}

export default MyComponent;

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