Получить доступ к сгенерированным именам классов, например, пользовательский рендерер заголовка панели - PullRequest
Новая
       36

Получить доступ к сгенерированным именам классов, например, пользовательский рендерер заголовка панели

0 голосов
/ 08 января 2019

Я использую компонент Panel из Office UI Fabric (https://developer.microsoft.com/en-us/fabric#/components/panel).) Панель разделяется на верхний и нижний колонтитулы, содержимое и нижний колонтитул, где содержимое всегда прокручивается, если в него помещается слишком много строк. Я хочу сделать, это добавить некоторые другие компоненты в заголовок, чтобы сделать его липким внутри панели (в данном случае Pivot, рендеринг некоторых вкладок).

Обычно это возможно с помощью свойства обратного вызова onRenderHeader Panel. При использовании этого я должен перерисовать весь заголовок с классами, чтобы получить тот же внешний вид, но дополнительно добавить свои собственные компоненты. Проблема в том, что я не могу просто установить 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>
    );
  }

Это единственное решение этой проблемы или есть какой-то "официальный" способ добиться этого? Я что-то упустил?

1 Ответ

0 голосов
/ 08 января 2019

onRenderHeader callback prop передает 3 аргумента. Второй - defaultRenderer, который вы можете использовать вместе с первым. Вот кодовая ручка, которая примерно показывает, как это сделать, не заботясь о classNames, приходящих по умолчанию: https://codepen.io/vitalius1/pen/oJMgzB

...