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

Question

我试图在我的 CommandBar 组件的最右侧显示一个 Persona 组件，我将其用作我的应用程序的 header。

这是一个代码片段

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>
  );
}

这会引发类型错误，因为 text 道具需要一个字符串而不是一个组件。如有任何帮助，我们将不胜感激！

Answer 1

在 ICommandBarItemProps 下有一个名为 commandBarButtonAs 的属性 docs 状态：

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

它的默认组件是 CommandBarButton 基本上是 Button

基本上有两种方法可以做到这一点。

继续使用 Button，并应用您自己的渲染器。基本上 IButtonProps 您可以添加 onRenderChildren 这将允许您添加任何组件，例如要渲染的 Persona。这个例子会告诉你它是如何完成的 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,
}]

或者添加你自己的不依赖于 CommandBarButton 的疯狂组件，但这意味着你需要自己处理所有事情，比如焦点、可访问性。这个例子会告诉你它是如何完成的 https://codepen.io/mohamedhmansour/pen/GPNKwM

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

function PersonaCommandBarComponent() {
  return (
    
  );
}

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

How can I display a Persona component in a CommandBar in React Fabric-UI?

reactjs

office-ui-fabric