在选项卡下渲染票证

Question

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

Answer 1

我看到的最简单的方法是使用传统的扩展插槽来实现。一种更明显的方法（对于 pilet 开发人员）是使用自定义的 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>
    )} />
  );
};

在您的应用程序中使用它 shell 您在 pilet 中需要做的就是为 tabs.

注册一个扩展

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

在选项卡下渲染票证

Render pilet under a tab

micro-frontend

piral