通过作为props传递的方法从状态数组中删除元素

// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [items, setItems] = useState(['item1', 'item2', 'item3']);

  const removeItem = (index) => {
    const newItems = [...items];
    newItems.splice(index, 1);
    setItems(newItems);
  };

  return (
    <div>
      <ChildComponent removeItem={removeItem} />
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default ParentComponent;

// 子组件
import React from 'react';

function ChildComponent({ removeItem }) {
  const handleRemove = (index) => {
    removeItem(index);
  };

  return (
    <div>
      <button onClick={() => handleRemove(0)}>删除第一个元素</button>
    </div>
  );
}

export default ChildComponent;