React列表删除效果

以下是一个React组件的简化示例，演示了如何实现一个列表项的删除功能：

import React, { useState } from 'react';
 
const ListItem = ({ text, onDelete }) => (
  <li>
    {text}
    <button onClick={onDelete}>删除</button>
  </li>
);
 
const List = () => {
  const [items, setItems] = useState(['苹果', '香蕉', '橙子']);
 
  const handleDelete = (index) => {
    setItems(items.filter((item, i) => i !== index));
  };
 
  return (
    <ul>
      {items.map((item, index) => (
        <ListItem
          key={item}
          text={item}
          onDelete={() => handleDelete(index)}
        />
      ))}
    </ul>
  );
};
 
export default List;

这个例子中，我们定义了一个ListItem组件，它接受文本和一个删除处理函数onDelete。在List组件中，我们维护一个列表项的状态，并为每个列表项提供一个删除按钮，当按钮被点击时，会调用handleDelete函数来更新状态，从而移除对应的列表项。