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

Question

我尝试了很多方法来在命令栏组件中渲染自定义组件，但没有成功。让我知道命令栏组件的可能性或局限性。

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

每个项目都有CommandBar适合commandBarButtonAs您需要的属性。

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

一个例子：

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