如何将右键菜单添加到react表行，并访问其属性？

import React, { useState } from 'react';

const TableRow = ({ rowData }) => {
  const [showContextMenu, setShowContextMenu] = useState(false);
  const [contextMenuData, setContextMenuData] = useState(null);

  const handleContextMenu = (e, rowData) => {
    e.preventDefault();
    setContextMenuData(rowData);
    setShowContextMenu(true);
  };

  return (
    <tr onContextMenu={(e) => handleContextMenu(e, rowData)}>
      <td>{rowData.name}</td>
      <td>{rowData.age}</td>
      {/* 其他表格行的内容 */}
      
      {showContextMenu && (
        <ContextMenu
          rowData={contextMenuData}
          onHide={() => setShowContextMenu(false)}
        />
      )}
    </tr>
  );
};

const ContextMenu = ({ rowData, onHide }) => {
  const handleMenuItemClick = (e, action) => {
    e.preventDefault();
    // 根据菜单项的 action 属性执行相应的操作
  };

  return (
    <div className="context-menu" onClick={onHide}>
      <ul>
        <li onClick={(e) => handleMenuItemClick(e, 'edit')}>编辑</li>
        <li onClick={(e) => handleMenuItemClick(e, 'delete')}>删除</li>
        {/* 其他菜单项 */}
      </ul>
    </div>
  );
};