如何解决在选项卡下渲染成堆
我想在选项卡下渲染一个堆。我已经设法将桩名作为选项卡呈现,但是无法呈现内容。我正在使用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>);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。