透视：从未选择任何选项卡开始

Question

使用 Fabric React，我正在开发一个使用 Pivot 元素的组件。

首次显示组件时，不应选择任何选项卡，必须在选项卡下显示一些内容headers。单击选项卡后，相关内容将显示在那里。

documentation page 中的示例 "No Pivots Selected" 非常接近我想要的。在第一个渲染中，没有选择任何选项卡。我认为道具 selectedKey={null} 应该给出那个结果。

以下代码基于该示例，但即使第一次显示该组件，选项卡（第一个）也会显示为选中状态（例如，下方有蓝色下划线）。

有什么问题？

import * as React from "react";
import { Pivot, PivotItem } from "office-ui-fabric-react";

export interface MainProps {}

export const Main: React.FC<MainProps> = () => {
  const [selectedKey, setSelectedKey] = React.useState(null);

  const pivotItems: { [key: string]: React.ReactElement<any> } = {
    Settings: <div>Settings</div>,
    Controls: <div>Controls</div>
  };
  const _getTabId = (itemKey: string): string => {
    return `ShapeColorPivot_${itemKey}`;
  };

  const _handleLinkClick = (item: PivotItem): void => {
    setSelectedKey(item.props.itemKey);
  };

  return (
    <>
      <Pivot
        headersOnly
        selectedKey={selectedKey}
        getTabId={_getTabId}
        onLinkClick={_handleLinkClick}
        style={{ flexGrow: 1 }}
      >
        {Object.keys(pivotItems).map(name => (
          <PivotItem
            key={`pivotItemKey_${name}`}
            headerText={name}
            itemKey={name}
          />
        ))}
      </Pivot>
      {selectedKey ? pivotItems[selectedKey] : <div>Start</div>}
    </>
  );
};

Answer 1

我使用

做了一个快速代码笔

    <Pivot selectedKey={null} >

而且效果很好。您确定您使用的是最新版本的 Fabric 吗？

透视：从未选择任何选项卡开始

Pivot: Start with no tabs selected

office-ui-fabric