如何在 Office Fabric UI React 中将 ContextualMenu 与 Persona 一起使用？

Question

我正在使用Office Fabric UI React。我想创建一个与Persona 对象一起使用的ContextualMenu。

---

这个例子直接使用 ContextualMenu 来展示它是如何实现的 附加到任意元素。其余示例使用 ContextualMenu 通过 Fabric Button 组件。

Microsoft 提供了一个如何将ContextualMenu 应用于任意对象的示例，但是，它似乎不适用于Persona 对象。 Persona 组件没有 ref 属性，并且将引用分配给 componentRef 属性似乎不起作用。

似乎Persona 组件有一个继承自HTMLAttributes<T> 接口的属性：contextMenu?: string;，但我看不出如何将可选字符串与ContextualMenu 一起使用。

const AppHeaderProfile: React.FunctionComponent<IAppHeaderProfileProps> = () => {
  const personaRef = React.useRef(null);
  const [showContextualMenu, setShowContextualMenu] = React.useState(false);
  const onShowContextualMenu = useConstCallback(() =>
    setShowContextualMenu(true)
  );
  const onHideContextualMenu = useConstCallback(() =>
    setShowContextualMenu(false)
  );

  const menuItems: IContextualMenuItem[] = [
    {
      key: "profile",
      text: "My Profile",
      onclick: () => console.log("My Profile clicked")
    }
  ];

  return (
    <div className="app-header-profile">
      <Persona
        className="user"
        componentRef={personaRef}
        size={PersonaSize.size32}
        onClick={onShowContextualMenu}
      />
      <ContextualMenu
        items={menuItems}
        target={personaRef}
        hidden={!showContextualMenu}
        onItemClick={onHideContextualMenu}
        onDismiss={onHideContextualMenu}
      />
    </div>
  );
};

Answer 1

您可以使用道具 onRenderPrimaryText 或任何其他 onRender 道具来渲染您自己的东西。然后，您可以根据需要设置按钮样式。

<Persona
  {...examplePersona}
  onRenderPrimaryText={(props: IPersonaProps) => (
    <Button
      menuProps={{
        items: [
          { key: "1", text: "Option1" },
          { key: "2", text: "Option2" }
        ]
      }}
    >
      {props.text}
    </Button>
  )}
/>;

希望这能有所帮助！