在ReactJs中的一个应用程序中，我正在尝试使用模态来确认删除用户。通常我在用户表中创建了一个删除函数，用于从数据库中删除用户。现在我想将此功能传递给模态。我想知道如何轻松地将删除函数传递给模态。当我在模态中确认删除操作时，用户将被删除。我将感激任何指导。

我的模式.js

import React from "react";

export default function MyModal() {
  const [showModal, setShowModal] = React.useState(false);
  return (
    <>
      <button
        className="bg-red-600 text-white active:bg-pink-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
        type="button"
        onClick={() => setShowModal(true)}
      >
        Delete
      </button>
      {showModal ? (
        <>
          <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
            <div className="relative w-auto my-6 mx-auto max-w-3xl">
              {/*content*/}
              <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
                {/*header*/}
                <div className="flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t">
                  <h3 className="text-3xl font-semibold">Modal Title</h3>
                  <button
                    className="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
                    onClick={() => setShowModal(false)}
                  >
                    <span className="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
                      ×
                    </span>
                  </button>
                </div>
                {/*body*/}
                <div className="relative p-6 flex-auto">
                  <p className="my-4 text-slate-500 text-lg leading-relaxed">
                    Are you sure you want to delete this user?
                  </p>
                </div>
                {/*footer*/}
                <div className="flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b">
                  <button
                    className="text-blue-600 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                    type="button"
                    onClick={() => setShowModal(false)}
                  >
                    Close
                  </button>
                  <button
                    className="bg-red-600 text-white active:bg-emerald-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                    type="button"
                    onClick={() => setShowModal(false)}
                  >
                    Delete
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
        </>
      ) : null}
    </>
  );
}

管理用户.js

import { useEffect, useState } from "react";
import { useAuthContext } from "../hooks/useAuthContext";
import MyModal from "../components/MyModal"
import LoadingSpinner from "../components/LoadingSpinner";

function ManageUser() {
  const [users, setUser] = useState([]);
  const [loading, setLoading] = useState(false)
  useEffect(() => {
    getData();
  }, []);
  async function deleteOperation(_id) {
    let result = await fetch(`/api/user/${_id}`, {
      method: "DELETE",
    });
    result = await result.json();
    console.warn(result);
    getData();
  }

  async function getData() {
    setLoading(true)
    let result = await fetch("/api/user/users");
    result = await result.json();
    setUser(result);
    setLoading(false)
  }

  return (
    <div>
      <h1 className="flex justify-center py-4 text-xl font-bold">Zarządzaj użytkownikami:</h1>
      <div className="flex justify-center py-2">
      <div className="flex justify-between items-center h-30 max-w-[1240px] mx-auto px-4">
        { loading ? (<div className="flex justify-center items-center "><LoadingSpinner/></div>) : 
          <div className=" overflow-x-auto relative shadow-md sm:rounded-lg">
              <table className="w-full text-sm text-center text-white">
                  <thead className="text-xs text-white uppercase bg-rgba(6, 18, 36, 0.945)">
                      <tr>
                          <th scope="col" className="py-3 px-6">
                              Nazwa
                          </th>
                          <th scope="col" className="py-3 px-6 hidden sm:table-cell">
                              Email
                          </th>
                          <th scope="col" className="py-3 px-6">
                              Admin
                          </th>
                          <th scope="col" className="py-3 px-6">
                          </th>
                      </tr>
                  </thead>
                  <tbody>
                  {users.map((user) => (
                      <tr key={user._id} user={user} className="bg-rgba(6, 18, 36, 0.945) border-b border-[#00df9a] ">
                          <th scope="row" className="py-4 px-6 font-medium text-white whitespace-nowrap">
                          {user.name}
                          </th>
                          <td className="py-4 px-6 hidden sm:table-cell">
                          {user.email}
                          </td>
                          <td className="py-4 px-6">
                          {user.isAdmin ? "Tak" : "Nie"}
                          </td>
                          <td className="py-4 px-6 text-right">
                          <MyModal/><button className="bg-red-500 hover:bg-[#00df9a]  text-white font-semibold py-2 px-4 border border-zinc-900 rounded shadow" onClick={() => deleteOperation(user._id)}>Delete</button>
                          </td>
                      </tr>
                      
                      ))}
                  </tbody>
              </table>
          </div>
        }   
      </div>
      
      </div>
    </div>
  );
}

export default ManageUser;

有没有什么快速的方法可以将我用来删除用户的函数传递给这个模态？