时间戳

首页 > 解决方案 > 如何在 React Fabric-UI 的 CommandBar 中显示 Persona 组件？

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

问题描述

我试图在我的 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 需要一个字符串而不是组件。任何帮助，将不胜感激！

标签： reactjsoffice-ui-fabric

解决方案

在ICommandBarItemProps下面有一个称为文档状态commandBarButtonAs的属性：

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

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

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

  1. 继续使用 Button，并应用您自己的渲染器。基本上，IButtonProps您可以添加onRenderChildren这将允许您添加任何组件，例如要渲染的 Persona。此示例将向您展示它是如何完成的https://codepen.io/micahgodbolt/pen/qMoYQo
const farItems = [{
    // 如果您有想要隐藏向下箭头的子菜单，则设置为 null。
    onRenderMenuIcon: () => null,
    // 任何渲染器
    onRenderChildren: () => ,
    关键：'角色'，
    名称：“角色”，
    仅图标：真，
}]
  1. 或者添加您自己的疯狂组件，不依赖于CommandBarButton但这意味着您需要自己处理焦点、可访问性等所有事情。此示例将向您展示如何完成https://codepen.io/mohamedhmansour/pen/GPNKwM
const farItems = [
  {
    关键：'角色'，
    名称：“角色”，
    commandBarButtonAs: PersonaCommandBarComponent
  }
];

功能 PersonaCommandBarComponent() {
  返回 （
    
  );
}

推荐阅读