Question

我试图在CommandBar组件的最右边显示一个Persona组件，该组件用作应用程序的标题。

这是一个代码段

text

这会引发类型错误，因为<input type="file" name="datainfo[site_logo]" class="custom-file-input" id="site_logo"> <input type="file" name="datainfo[site_fav]" class="custom-file-input" id="site_fav">属性需要一个字符串而不是一个组件。任何帮助将不胜感激！

Answer 1

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

重写单个命令栏按钮的呈现的方法。注意，当在溢出中渲染时不使用

其默认组件为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组件？

1 个答案: