如何为React生成的MenuItem组件添加自定义属性？

直接给MenuItem添加id或自定义data-*属性即可，Material UI组件会自动将这些原生HTML属性传递到底层DOM元素上，之后你就能在事件处理器中通过event.target（或更可靠的event.currentTarget）获取这些属性。

修改后的完整代码示例 #

export default function FileSystemNavigator() {
  const [contextMenu, setContextMenu] = React.useState<{
    mouseX: number;
    mouseY: number;
  } | null>(null);

  const handleContextMenu = (event: React.MouseEvent) => {
    event.preventDefault();
    setContextMenu(
      contextMenu === null
        ? {
            mouseX: event.clientX + 2,
            mouseY: event.clientY - 6
          }
        : null
    );
  };

  // 处理MenuItem点击，获取属性示例
  const handleMenuItemClick = (event: React.MouseEvent) => {
    const menuItemElement = event.currentTarget as HTMLElement;
    // 获取id属性
    console.log("选中的菜单项ID:", menuItemElement.id);
    // 获取自定义data属性
    console.log("菜单项动作:", menuItemElement.dataset.action);
    setContextMenu(null);
  };

  return (
    <div onContextMenu={handleContextMenu} style={{ cursor: "context-menu" }}>
      <TreeView
        aria-label="file system navigator"
        defaultCollapseIcon={<ExpandMoreIcon />}
        defaultExpandIcon={<ChevronRightIcon />}
        sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: "auto" }}
      >
        <TreeItem nodeId="1" label="Applications">
          <TreeItem nodeId="2" label="Calendar" />
        </TreeItem>
        <TreeItem nodeId="5" label="Documents">
          <TreeItem nodeId="10" label="OSS" />
          <TreeItem nodeId="6" label="MUI">
            <TreeItem nodeId="8" label="index.js" />
          </TreeItem>
        </TreeItem>
      </TreeView>
      <Menu
        open={contextMenu !== null}
        onClose={() => setContextMenu(null)}
        anchorReference="anchorPosition"
        anchorPosition={
          contextMenu !== null
            ? { top: contextMenu.mouseY, left: contextMenu.mouseX }
            : undefined
        }
      >
        {/* 添加id和自定义data-action属性 */}
        <MenuItem id="menu-copy" data-action="copy" onClick={handleMenuItemClick}>Copy Ctrl+C</MenuItem>
        <MenuItem id="menu-delete" data-action="delete" onClick={handleMenuItemClick}>Delete</MenuItem>
        <MenuItem id="menu-move" data-action="move" onClick={handleMenuItemClick}>Move</MenuItem>
        <MenuItem id="menu-email" data-action="email" onClick={handleMenuItemClick}>Email</MenuItem>
      </Menu>
    </div>
  );
}

关键说明 #

• 所有原生HTML属性（如id、data-*）都可以直接传递给MenuItem，组件会将其绑定到底层的可交互DOM元素上。
• 使用event.currentTarget比event.target更可靠：event.target可能指向MenuItem内部的子元素（比如文本节点），而currentTarget始终指向绑定了点击事件的MenuItem本身。

内容的提问来源于stack exchange，提问作者Jack