如何在命令栏中呈现自定义组件（UI Fabric）

Question

我尝试了很多方法来在 command Bar 组件中渲染自定义组件，但没有成功。给我一个想法，它是可能的，或者它对命令栏组件的限制。

import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
const items: ICommandBarItemProps[] = [{
        key: "topicName",
        text: displayTitle,
        disabled: true,
        buttonStyles: {
            textContainer: {
                color: colorBlack
            },
            label: {
                fontWeight: "bold"
            },
            rootDisabled: {
                backgroundColor: colorWhite
            }
        },
    },
    // in here i want to render custom component (just after topicName)
]; 
<CommandBar items = {items}
farItems = {farItems} />

我也试过这种方法，但出现错误。

{ key: 'custom', onRender: (item: any) => <div>Custom</div> }

Answer 1

我觉得不错：

      {
        key: 'divider',
        onRender: () => <div style={{margin: '5px 0', width: '2px', background: '#ddd'}} > </div>
      },

我在这个代码笔中使用这个：https://codepen.io/micahgodbolt/pen/vPzZpQ?editors=0010

Answer 2

CommandBar 的每一项都有 commandBarButtonAs 属性仅供您使用。

文档：https://developer.microsoft.com/en-us/fabric#/controls/web/commandbar#ICommandBarItemProps

一个例子：

<CommandBar items=[
    {
        key: 'button',
        onClick: () => ({}),
        commandBarButtonAs: () => (<Button />)
    }
] />

如何在命令栏中呈现自定义组件（UI Fabric）

How to render custom component in command bar (UI Fabric)

typescript

reactjs

office-ui-fabric