0

Office Fabric UI Reactを使用しています。オブジェクトContextualMenuで使用されるを作成したい。Persona

この例では、ContextualMenu を直接使用して、任意の要素にアタッチする方法を示しています。残りの例では、Fabric Button コンポーネントを介して ContextualMenu を使用しています。

ContextualMenuMicrosoft は任意のオブジェクトにa を適用する方法の例を提供していますが、オブジェクトでは機能しないようです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 に答える