Javascript React中如何处理组件之间的动作事件

我有一个在其他组件中重用的组件，但有一个问题是，处理操作事件的代码(例如:onDelete)重复了太多次.我必须处理onDelete在所有使用明信片的地方，即使逻辑代码没有什么不同，除了在主页.那么，有什么方法可以避免HandleDelete的重复吗？尊重任何 idea .我是React.js的新手，希望你们能帮助我！

明信片组件:

 function PostCard ({ item, onDelete }) => {
    return (
      <div onClick={() => onDelete(item.id)}>{item.title}</div>
    )
 }

主页中使用的明信片:

 const HomePage = () => {

   function handleDelete() {
      // only mutate array to re-render list (not redirect)
   }

   return (
      <>
        {postList.map(post => (
           <PostCard item={post} onDelete={handleDelete} />
        ))}
      </>
   )
  
 }

在详细页面中使用的明信片:

 const DetailPage = () => {
   function handleDelete() {
      // redirect to home page after delete
   }

   return (        
      <PostCard item={post} onDelete={handleDelete} />
   )
  
 }

另一页使用的明信片:

 const AnotherPage = () => {
   function handleDelete() {
      // redirect to home page after delete
   }

   return (        
      <PostCard item={post} onDelete={handleDelete} />
   )
  
 }