【React】react单页后台如何重构成iframes多标签页的后台?

普通的react单页后台,因为内容太多了,要搞成传统的多tabs后台,方便来回切换

我现在是搞成iframe还是不需要 直接一个大组件框起来,但是这样会不会一个容器太多内容了?
如果搞成iframe是不是要做成多页??

头疼,怎样方便点,我也是第一次重构项目

回答

前端时间有个类似的需求，不知道是不是你需要的
我简单说下流程吧
1. 原有的项目是使用react-router做路由，现在就一个页面，因此react-router中的路由配置就简单的一个登录和主页；然后添加一个根据path获取组件的函数
2. 添加一个组件TabList用于做页签控制，这里ui用的antd的tabs
3. 原有的路由跳转全部改成在Tablist中添加一个页签，这里涉及到跨组件通信，我用的是node自带的events库，直接发一个消息就可以了
然后到这里其实就完成了，很简单的大概花了半天，后面还添加了像同一页面只能打开一次，页面刷新及关闭，右键菜单等功能，都在TabList组件里完成的
因为是公司的项目，我这里只发一个页签的截图

【React】react单页后台如何重构成iframes多标签页的后台?

修改前:
控制路由的代码

const RouteWithSubRoutes = route => (
    <Route
        exact={route.exact}
        path={route.path}
render={props => (
            <route.component {...props} routes={route.routes} />
        )}
    />
);
const routes = [
    {
        exact: true,
        path: "/login",
        component: Loadable({
            loader: () => import('../container/LoginContainer'),
            loading: Loading
        }),
    },
    {
        path: '/',
        component: Loadable({
            loader: () => import('../container/AppContainer'),
            loading: Loading
        }),
        routes: [
            ArrangementRoutes,
            OutPatientRoutes,
            NurseDeskRoutes,
            ARTRoutes,
            FollowUpRoutes,
            CaseManagementRoutes,
            QualityControlRoutes,
            FrozenRoutes,
            BUltrasoundRoutes,
            AdminRoutes,
            TestRoutes
        ]
    }
];

然后主界面那里的是这样的

<Content style={{backgroundColor:"white",height:"92vh", overflowY:"auto", padding:"10px"}}>
    <div style={{display: visible ? "none" : "block"}}>
        {this.props.routes.map((route, i) => <RouteWithSubRoutes key={i} {...route} />)}
    </div>
</Content>

修改后:
routes里面只保留了login和主界面, 添加了一个根据path获取组件的函数

//依据路由获取组件
export const getComponentByPath = path => {
    for (let i = 0; i < routeList.length; i++) {
        if (routeList[i].path === path) {
            return routeList[i].component
        }
    }
    return ""
}
//路由
export const routes = [
    {
        exact: true,
        path: "/login",
        component: Loadable({
            loader: () => import('../container/LoginContainer'),
            loading: Loading
        }),
    },
    {
        exact: true,
        path: '/',
        component: Loadable({
            loader: () => import('../container/AppContainer'),
            loading: Loading
        })
    },
    {
        component: NoMatch
    }
];

然后界面里改为使用新写的组件TabList

<Content class="project-content">
    <div style={{display: visible ? "none" : "block"}}>
        <TabList/>
    </div>
</Content>

TabList里面添加了像刷新,重复判定,自动跳转等功能,因此逻辑比较复杂;如果你只是要新增的话,就把以前的路由跳转改为触发TabList里面的新增页签函数就可以了

以上是 【React】react单页后台如何重构成iframes多标签页的后台? 的全部内容， 来源链接： utcz.com/a/76887.html

回到顶部