如何在React中从Modal中删除项

import React, { useState } from 'react';

function MyComponent() {
  const [modalVisible, setModalVisible] = useState(false);
  const [items, setItems] = useState([]);

  // 其他代码...

  return (
    <div>
      {/* 其他组件内容 */}
      {modalVisible && (
        <Modal>
          {/* Modal的内容 */}
        </Modal>
      )}
    </div>
  );
}

function MyComponent() {
  // ...

  const handleDeleteItem = (item) => {
    setModalVisible(true);
    setItems(item);
  };

  // ...

  return (
    <div>
      {/* 其他组件内容 */}
      {modalVisible && (
        <Modal>
          {/* Modal的内容 */}
          <button onClick={() => deleteItem(items)}>确认删除</button>
        </Modal>
      )}
    </div>
  );
}

function Modal({ children }) {
  const handleDelete = () => {
    // 删除项的逻辑
    setItems(items.filter((item) => item.id !== items.id));
    setModalVisible(false);
  };

  return (
    <div>
      {children}
      <button onClick={handleDelete}>确认删除</button>
    </div>
  );
}