micro-frontend - 在选项卡下渲染 pilet

Question

我想在选项卡下渲染一个桩。我已设法将 pilet 名称呈现为选项卡，但无法呈现内容。我正在使用 Fluent UI Pivots。 https://developer.microsoft.com/en-us/fluentui#/controls/web/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>
    )} />
  );
};

在你的应用程序外壳中使用它，你需要做的就是为tabs.

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