如何在React Fabric-UI的CommandBar中显示Persona组件？

Question

I am trying to display a Persona component on the far right of my CommandBar component, which I use as a header for my application.

Here's a code snippet

const getFarItems = () => {
  return [
    {
      key: 'profile',
      text: <Persona text="Kat Larrson" />,
      onClick: () => console.log('Sort')
    }
  ]
}


const FabricHeader: React.SFC<props> = () => {
  return (
    <div>
      <CommandBar
        items={getItems()}
        farItems={getFarItems()}
        ariaLabel={'Use left and right arrow keys to navigate between commands'}
      />
    </div>
  );
}

This throws a type error because the text prop expects a string and not a component. Any help would be appreciated!

Answer 1

Under the ICommandBarItemProps there is a property called commandBarButtonAs that the docs state:

Method to override the render of the individual command bar button. Note, is not used when rendered in overflow

And its default component is CommandBarButton which is basically a Button

Basically there are two ways to do this.

1. Keep using Button, and apply your own renderer. Basically the IButtonProps you can add onRenderChildren which would allow you to add any Component such as Persona to render. This example would show you how it is done https://codepen.io/micahgodbolt/pen/qMoYQo

const farItems = [{
    // Set to null if you have submenus that want to hide the down arrow.
    onRenderMenuIcon: () => null, 
    // Any renderer
    onRenderChildren: () => ,
    key: 'persona',
    name: 'Persona',
    iconOnly: true,
}]

2. Or add your own crazy component not dependent on CommandBarButton but that means you need to handle everything like focus, accessibility yourself. This example would show you how it is done https://codepen.io/mohamedhmansour/pen/GPNKwM

const farItems = [
  {
    key: 'persona',
    name: 'Persona',
    commandBarButtonAs: PersonaCommandBarComponent
  }
];

function PersonaCommandBarComponent() {
  return (
    
  );
}