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