作为参考，我使用react contextmenu向我的应用程序添加上下文菜单。我有一个列表中的项目，您可以右键单击每个项目来对其执行一些操作。每个项目都提供了一个上下文菜单，它也是一个列表，所以我有几个 map 方法(我确保根据此处和此处的信息使用唯一密钥）。但是，这是我观察到的行为（右键单击列表中的任何项目总是显示列表中最后一个项目的上下文菜单）：

这是我的密码：

function ListItem(props) { 
  // console.log(`CONTEXT OPTIONS for ${props.name}:\n${JSON.stringify(props.contextOptions)}`);

  // console.log(`Mapped context options for ${props.name}:\n${props.contextOptions.map((option) => option.label + option.subLabel)}`);

  const contextOptions = props.contextOptions.map((option) => 
    <MenuItem 
      key={option.label + option.subLabel} 
      disabled={option.disabled} 
      divider={option.divider}>
        {option.label}<span className="context-sublabel">{option.subLabel}</span>
    </MenuItem>  
  );

  return (
    <div>
      <ContextMenuTrigger id="list-item-context">
        <div className={"list-item-container" + (props.selected ? " list-item-selected" : "")}
          onClick={ () => props.onSelection(props.index) } >
          <p className="list-item-label">{props.name}</p>
        </div>
      </ContextMenuTrigger>
      <ContextMenu id="list-item-context">
        {contextOptions}
      </ContextMenu>
    </div>
  );
}

我甚至把打印语句扔到了各处，以确保我不会以某种方式传递相同上下文菜单信息的列表。例如，有一次我写下了这样的Map：

const contextOptions = props.contextOptions.map((option) => {
    console.log(`Item: ${props.name}, label: ${option.label}, sub-label: ${option.subLabel}`);

    return (<MenuItem 
      key={option.label + option.subLabel} 
      disabled={option.disabled} 
      divider={option.divider}>
        {option.label}<span className="context-sublabel">{option.subLabel}</span>
    </MenuItem>);
  });

输出证明我的数据是正确的：

Item: ITEM A, label: Copy "ITEM A", sub-label: 
Item: ITEM A, label: , sub-label: 
Item: ITEM A, label: Connect, sub-label:  - [PRIMARY IP A]
Item: ITEM A, label: Connect, sub-label:  - [BACKUP IP A]
Item: ITEM B, label: Copy "ITEM B", sub-label: 
Item: ITEM B, label: , sub-label: 
Item: ITEM B, label: Connect, sub-label:  - [PRIMARY IP B]
Item: ITEM B, label: Connect, sub-label:  - [BACKUP IP B]
Item: ITEM C, label: Copy "ITEM C", sub-label: 
Item: ITEM C, label: , sub-label: 
Item: ITEM C, label: Connect, sub-label:  - [PRIMARY IP C]
Item: ITEM C, label: Connect, sub-label:  - [BACKUP IP C]

注意：在我的应用程序上下文中，空标签或子标签是可以的。
我真的不明白为什么实际呈现的ui没有显示正确的文本。也许它不被支持？我看到的每个使用这个库的例子都明确地写出来了 MenuItem jsx。