Добавить класс и идентификатор в заголовок сводного элемента пользовательского интерфейса React Fabric

Question

Я не могу получить className или же id для рендеринга с помощью ссылки кнопки вкладки через headerButtonProps в PivotItem. Я думаю, что это должно быть возможно, поскольку добавлена ​​версия 7.114.0 IButtonPropsдля кнопки поворота .. я упускаю что-то очевидное? Мой атрибут данных отображается нормально, как и имя класса и идентификатор для элемента контейнера вокруг содержимого вкладки.

Образец кода:

      <PivotItem
  headerText={tab.label}
  itemKey={tab.id}
  key={tab.id}
  headerButtonProps={{
    'data-test': 'test',
    className: 'tab-button',
    id: 'tab-id'
  }}
  itemCount={tab.count}
  className={tab.className}
  id={tab.idName}
 >
  {tab.content}
</PivotItem>

Answer 1

если вы нажмете F12 в vs-коде на Pivotили компоненты, которые приведут вас к исходному коду в node_modules. Перейдите к ближайшему Pivot.base.jsфайл - я думаю, что строка № 48 показывает, почему это происходит:

      return (React.createElement(CommandButton, tslib_1.__assign({}, headerButtonProps, { id: tabId, key: itemKey, className: isSelected ? _this._classNames.linkIsSelected : _this._classNames.link, onClick: _this._onLinkClick.bind(_this, itemKey), onKeyPress: _this._onKeyPress.bind(_this, itemKey), ariaLabel: link.ariaLabel, role: "tab", "aria-selected": isSelected, name: link.headerText, keytipProps: link.keytipProps, "data-content": contentString }), linkContent));

Это реализация по умолчанию для renderPivotLink- и вы можете видеть, что он берет из параметра ссылки. Я предполагаю, что параметр ссылки получен из дочерних элементов типа PivotItem.

The tslib_1.__assign()метод в строке № 48 эффективно объединяет headerButtonPropsвы передали объект в третьем параметре, а третий параметр устанавливает оба idа также className- так что эти значения переопределяют ваши.

Если бы эти два параметра были переставлены местами, ваше className или ID и т. д. заменили бы те, которые установлены в исходном коде Pivot - они, очевидно, не хотят, чтобы люди делали это, поэтому это правильный порядок. Они могли бы установить className для объекта, объединяющего ваши имена классов с именами из исходного кода — это то, что они делают в некоторых других компонентах, — но они не делают этого здесь.

Если вы хотите предложить им это сделать — это может быть хорошей идеей для Issue или Pull Request в репо:https://github.com/microsoft/fluentui/tree/master/packages/react .

Я понимаю, что опоздал с ответом вам на 2 месяца, однако, если вы хотели что-то сделать в CSS или JS/TS на основе идентификатора или класса, вы все равно можете сделать это, используя свои атрибуты данных в качестве селектора.

Для таблиц стилей — дайте родительскому элементу Pivot имя класса — пример (SCSS):

      .parentPivot {
   button[data-your-attribute="someValue"] {
      /* your styling here */
   }
}

В коде (ТС):

         const yourElement = document.querySelector(`.${pivotClassName} button[data-your-attribute="someValue"]`);
   if (yourElement) {
      // do stuff
   }

Надеюсь, это поможет в будущем!

Том