Reactjs 在自定义面板标题渲染器中访问生成的类名

我正在使用Office UI Fabric中的面板组件。面板分为页眉、内容和页脚，其中内容始终可滚动，以防有太多行无法容纳。我想做的是，在标题中添加一些其他组件，使其在面板中保持粘性。在本例中，它是一个轴，呈现一些选项卡

这通常可以通过使用面板的onRenderHeader回调属性来实现。当使用它时，我必须用类重新呈现完整的头文件，以获得相同的外观和感觉，但还要添加我自己的组件。问题是，我不能简单地将ms Panel header设置为className属性，因为至少header不作为类选择器存在，而只作为具有生成的id后缀的作用域版本存在，例如header-103，当DOM结构更改时，它可以更改。因此，我需要访问这些生成的类

我唯一能想到的就是存储对面板组件实例的引用，并在呈现自定义头时使用内部_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>
    );
  }

---

这是解决这个问题的唯一办法，还是有一些官方的方法来实现这一点？我遗漏了什么吗？

onRenderHeader回调道具正在传回3个参数。第二个是可以与第一个一起使用的defaultRenderer。下面是一个代码笔，它粗略地展示了如何做到这一点，而不需要关心默认的类名：

这并不理想，但如果必须拥有类名，则可以运行默认呈现器，然后访问其道具，然后从中获取className属性。我同意你应该更容易完成你想做的事情

大概是这样的：

    const element = defaultRenderer ? defaultRenderer(props) : null;
    const className = element ? element.props.className : '';

---

您可能还需要调整轴的位置以与标题对齐。谢谢，这与我正在搜索的内容非常接近。但是，我希望对用于页眉的枢轴使用相同的定位，而不手动复制其填充值。这就是为什么我试图使用完全相同的头类将它放在同一个div中。如果onRenderHeader回调将类映射作为附加参数接收，那就太好了。