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

Question

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

这是一个代码片段

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

这会抛出一个类型错误，因为textprop 需要一个字符串而不是一个组件。任何帮助，将不胜感激！

Answer 1

下ICommandBarItemProps有一个名为属性commandBarButtonAs的文档状态：

覆盖单个命令栏按钮呈现的方法。注意，在溢出时不使用

它的默认组件CommandBarButton基本上是一个按钮

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

1. 继续使用 Button，并应用您自己的渲染器。基本上，IButtonProps您可以添加onRenderChildren这将允许您添加任何组件（例如 Persona）进行渲染。此示例将向您展示它是如何完成的https://codepen.io/micahgodbolt/pen/qMoYQo

const farItems = [{
    // 如果您有想要隐藏向下箭头的子菜单，则设置为 null。
    onRenderMenuIcon: () => null, 
    // 任何渲染器
    onRenderChildren: () => ,
    关键：“角色”，
    name: '人物',
    仅图标：真实，
}]

2. 或者添加你自己的不依赖的疯狂组件，CommandBarButton但这意味着你需要自己处理焦点、可访问性等所有事情。此示例将向您展示它是如何完成的https://codepen.io/mohamedhmansour/pen/GPNKwM

const farItems = [
  {
    关键：“角色”，
    name: '人物',
    commandBarButtonAs: PersonaCommandBarComponent
  }
];

函数 PersonaCommandBarComponent() {
  返回 （
    
  );
}