用于主框架选项卡组件。解决 antd
组件 Tabs
切换性能慢的问题。
测试项 |
页面切换重新渲染 |
页面切换 “隐藏” |
iframe src 嵌入页面 |
iframe 组件生成 |
性能 |
✅💯 |
⚠️(还需优化) |
✅💯 |
✅💯 |
页面状态 |
⚠️(有代码量) |
✅ |
✅ |
✅ |
路由使用 |
✅ |
✅ |
❌(浏览器地址栏无变化) |
✅ |
antd 组件 |
✅ |
✅ |
✅ |
❌(大量弹出类组件位置错乱) |
主框架交互 |
✅ |
✅ |
⚠️(局限以内,父页面交互复杂) |
✅ |
样式加载 |
✅ |
✅ |
✅ |
⚠️(还需优化) |
npm i @antdp/layout-tabs --save # yarn add @antdp/layout-tabs
import React from 'react';
import LayoutTabs from '@antdp/layout-tabs';
const Demo = ()=>{
return (
<LayoutTabs
// 菜单路由信息
dataSource={[]}
/>
)
}
export default Demo;
参数 |
说明 |
类型 |
默认值 |
dataSource |
菜单路由数据 |
LayoutTabsRouterProps[] |
- |
bodyPadding |
内容边距 |
`string |
number` |
参数 |
说明 |
类型 |
默认值 |
icon |
logo |
string |
- |
key |
key健 |
string |
- |
name |
名称 |
string |
- |
path |
路径 |
string |
- |
exact |
是否匹配路由 |
boolean |
- |
location |
路由信息 |
any |
- |
match |
匹配信息 |
any |
- |
element |
渲染内容 |
React.ReactNode |
- |
通过配置 @antdp/config
,来解决是否重新渲染或者 iframe
展示页面等功能