0

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

此示例直接使用 ContextualMenu 来展示如何将其附加到任意元素。其余示例通过 Fabric Button 组件使用 ContextualMenu。

Microsoft 提供了如何将 aContextualMenu应用于任意对象的示例，但是，它似乎不适用于该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>
  );
};
4

1 回答 1

0

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

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

希望这可以帮助！

于 2020-03-02T11:22:29.410 回答