0

我正在使用 Office UI Fabric ( https://developer.microsoft.com/en-us/fabric#/components/panel ) 中的 Panel 组件。面板分为页眉、内容和页脚，其中的内容总是可以滚动的，以防有太多行无法放入。我想做的是，在页眉中添加一些其他组件以使其在面板中具有粘性（在这种情况下是一个 Pivot，呈现一些选项卡）。

这通常可以通过使用onRenderHeaderPanel 的回调属性来实现。使用它时，我必须使用类重新渲染完整的标头以获得相同的外观，但另外注入我自己的组件。问题是，我不能简单地设置ms-Panel-header header为className属性，因为至少header不作为类选择器存在，而只是作为具有生成的 id 后缀（例如header-103）的范围版本，当 DOM 结构发生变化时会发生变化。因此，我需要访问这些生成的类。

我唯一能想到的就是存储对 Panel 组件实例的引用并_classNames在呈现我的自定义标题时使用内部属性。这是一段摘录（使用 TypeScript）：

private handleRenderHeader(): JSX.Element {
    const classNames = (this.panel.current as any)._classNames;
    return (
      <div className={classNames.header}>
        <p className={classNames.headerText} role="heading">
          My Headline
        </p>
        <Pivot
          selectedKey={this.selectedEntriesCategory}
          onLinkClick={this.handleSelectedEntriesCategoryClicked}
          headersOnly={true}
        >
          <PivotItem linkText="First Tab" itemIcon="Contact" />
          <PivotItem linkText="Second Tab" itemIcon="Group" />
        </Pivot>
      </div>
    );
  }

这是解决这个问题的唯一方法还是有一些“官方”的方法来实现这个？我错过了什么吗？

4

2 回答 2

1

onRenderHeader回调道具正在传回 3 个参数。第二个是defaultRenderer您可以与第一个一起使用的。这是一个代码笔，它粗略地展示了如何做到这一点，而无需关心默认的类名：https ://codepen.io/vitalius1/pen/oJMgzB

于 2019-01-08T18:28:08.850 回答
0

It's not ideal, but if you must have the className you can run the default renderer and then access its props and then get the className property from that. I agree that it should be easier to accomplish what you're trying to!

Something like this:

    const element = defaultRenderer ? defaultRenderer(props) : null;
    const className = element ? element.props.className : '';
于 2019-09-25T23:15:39.587 回答