在选项卡下渲染成堆

问题描述

我想在选项卡下渲染一个堆。我已经设法将桩名作为选项卡呈现，但是无法呈现内容。我正在使用Fluent UI Pivots。 https://developer.microsoft.com/en-us/fluentui#/controls/web/pivot 这个想法是，当您单击Tab / Pivot名称时，应该加载微型前端。

解决方法

我看到的最简单的方法是使用常规的扩展槽。对于堆积如山的开发人员来说，更显而易见的方法是拥有一个自定义API，例如registerTab，用于注册标签页组件。

按照简单的方法，您可以为Pivot进行以下操作：

export const MyTabComponent = () => {
  return (
    <ExtensionSlot name="tabs" render={children => (
      <Pivot>
        {children.map((child,i) =>
          <PivotItem headerText="First Tab" key={i}>
            {child}
          </PivotItem>
        )}
      </Pivot>
    )} />
  );
};

在应用外壳中使用此功能，您需要成堆地注册tabs的扩展名。

export function setup(api) {
  api.registerExtension("tabs",() => <div>Sample content!</div>);
}