标签：return Viewer appConfig OHIF Home 组件 path studylist 页面
OHIF Viewer 开发笔记（一）：添加登录页面
项目组件概览
在添加启动页面之前，需要对项目的框架结构有一个大致的了解。使用 React 官方提供的 React Developer Tools 可以在浏览器的调试窗口中看到StudyList页面的Component Tree：
图中左侧显示的是组件树，右侧显示组件的props属性。
上图的组件树中，App组件是项目的顶层组件，它的render方法返回的内容如下：
<Provider store={store}>
<AppProvider config={this._appConfig}>
<I18nextProvider i18n={i18n}>
<Router basename={routerBasename}>
<WhiteLabelingContext.Provider value={whiteLabeling}>
<SnackbarProvider service={UINotificationService}>
<DialogProvider service={UIDialogService}>
<ModalProvider modal={OHIFModal} service={UIModalService}>
<OHIFStandaloneViewer />
</ModalProvider>
</DialogProvider>
</SnackbarProvider>
</WhiteLabelingContext.Provider>
</Router>
</I18nextProvider>
</AppProvider>
</Provider>
组件嵌套最内层的OHIFStandaloneViewer组件是非常重要的组件，它使用react-router 提供的路由（Route）功能根据当前url返回对应的页面（组件）。
const routes = RoutesUtil.getRoutes(appConfig);
const currentPath = this.props.location.pathname;
const noMatchingRoutes = !routes.find(r =>
matchPath(currentPath, {
path: r.path,
exact: true,
})
);
console.log(routes);
return (
<>
<NProgress isAnimating={this.state.isLoading}>
{({ isFinished, progress, animationDuration }) => (
<Container
isFinished={isFinished}
animationDuration={animationDuration}
>
<Bar progress={progress} animationDuration={animationDuration} />
</Container>
)}
</NProgress>
<Route exact path="/silent-refresh.html" onEnter={RoutesUtil.reload} />
<Route exact path="/logout-redirect.html" onEnter={RoutesUtil.reload} />
{!noMatchingRoutes &&
routes.map(({ path, Component }) => (
<Route key={path} exact path={path}>
{({ match }) => (
<CSSTransition
in={match !== null}
timeout={300}
classNames="fade"
unmountOnExit
onEnter={() => {
this.setState({
isLoading: true,
});
}}
onEntered={() => {
this.setState({
isLoading: false,
});
}}
>
{match === null ? (
<></>
) : (
<Component match={match} location={this.props.location} />
)}
</CSSTransition>
)}
</Route>
))}
{noMatchingRoutes && <NotFound />}
</>
);
上述代码使用routes.map()方法将Route path和组件映射对应起来，我们使用console.log()方法查看routes的值：
routes数组中存储了5个元素，对应6个路径。其中根路径"/“和”/studylist"对应的都是studylist页面；"/local"页面功能为Drag and Drop DICOM files here to load them in the Viewer，Or click to Load files or Load folders from dialog。
修改思路&实现
- React项目默认会从localhost:3000启动，也就是根目录"/"。为了添加启动或登录页面，必须首先渲染一个我们自己定义的Home组件，然后在Home组件中设置链接跳转到studylist页面。
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import App from './App.js';
export default function Home(props) {
return (
<Router>
<Switch>
<Route exact path="/studylist">
<App {...props} />
</Route>
<Route exact path="/about">
<About />
</Route>
<Route exact path="/">
<Welcome />
</Route>
</Switch>
</Router>
);
}
function About() {
return (
<div>
<h2 color="blue">About</h2>
</div>
);
}
function Welcome() {
return (
<div>
<h2 color="blue" align="center">
欢迎来到直结肠癌诊断一体化平台！
</h2>
<ul>
<li>
<Link to="/studylist">Studylist</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
<hr />
</div>
);
}
上述代码使用react-router 提供的路由功能实现了页面间的跳转。Home组件并不是真正的“首页”，它的功能只是根据当前URL渲染不同的组件。当URL为"/"时，渲染自定义的Welcome组件，Welcome组件包含两个链接（Link将在渲染时被替换成a标签）。
- 之后，我们需要在OHIFStandaloneViewer的路由表中将“/”和Home组件对应，"/studylist"和原StudylistRouting组件对应。
我们找到获取routes的RoutesUtil.getRoutes()方法，其中定义的默认route为：
const ROUTES_DEF = {
default: {
viewer: {
path: '/viewer/:studyInstanceUIDs',
component: ViewerRouting,
},
standaloneViewer: {
path: '/viewer',
component: StandaloneRouting,
},
list: {
path: ['/studylist', '/'],
component: StudyListRouting,
condition: appConfig => {
return appConfig.showStudyList;
},
},
local: {
path: '/local',
component: ViewerLocalFileData,
},
IHEInvokeImageDisplay: {
path: '/IHEInvokeImageDisplay',
component: IHEInvokeImageDisplay
},
}
将list对象替换为：
// list: {
// path: ['/studylist', '/'],
// component: StudyListRouting,
// condition: appConfig => {
// return appConfig.showStudyList;
// },
// },
home: {
path: '/',
component: Home,
},
list: {
path: '/studylist',
component: StudyListRouting,
condition: appConfig => {
return appConfig.showStudyList;
},
},
即可在OHIFStandaloneViewer组件中实现路由，url为"/“时导向Home组件，url为”/studylist"时导向StudyingRouting组件。
此时重启项目，首先会进入Home组件渲染的页面，点击Studylist链接就进入了Studylist页面。
但如果进入study viewer页面，页面左上角的“Study List”链接会返回到"/"，需要把它修改为“/studylist”。使用React Development Tools定位到该链接由Header组件渲染，它的LinkPath prop由Viewer组件提供。
找到Viewers\platform\viewer\src\connectedComponents目录下的Viewer.js文件，将render方法return中 ConnectedHeader 元素的LinkPath prop由/改为/studylist。（原有代码被注释掉）
linkPath={
// appContext.appConfig.showStudyList ? '/' : undefined
appContext.appConfig.showStudyList ? '/studylist' : undefined
}
这样我们就将一个简单的页面添加到了OHIF Viewer的最前面，可以实现用户登录的功能。
简化的修改过程
- 在Viewers\platform\viewer\src目录（App.js和OHIFStandaloneViewer.js的同级目录）下添加Home.js文件（为简化只粘贴必要代码）：
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import App from './App.js';
export default function Home(props) {
return (
<Router>
<Switch>
<Route exact path="/studylist">
<App {...props} />
</Route>
<Route exact path="/about">
<About />
</Route>
<Route exact path="/">
<Welcome />
</Route>
</Switch>
</Router>
);
}
function About() {
return (
<div>
<h2 color="blue">About</h2>
</div>
);
}
function Welcome() {
return (
<div>
<h2 color="blue">
欢迎来到直结肠癌诊断一体化平台！
</h2>
<ul>
<li>
<Link to="/studylist">Studylist</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
<hr />
</div>
);
}
- 找到Viewers\platform\viewer\src\routes\RoutesUtil.js文件，在顶部引入Home组件：
import Home from '../Home.js';
将ROUTES_DEF常量修改为：
// list: {
// path: ['/studylist', '/'],
// component: StudyListRouting,
// condition: appConfig => {
// return appConfig.showStudyList;
// },
// },
home: {
path: '/',
component: Home,
},
list: {
path: '/studylist',
component: StudyListRouting,
condition: appConfig => {
return appConfig.showStudyList;
},
},
注释中为原有代码，未注释部分为新添加的部分。
- 找到Viewers\platform\viewer\src\connectedComponents目录下的Viewer.js文件，将render方法return中 ConnectedHeader 元素的LinkPath prop由/改为/studylist。（原有代码被注释掉）
linkPath={
// appContext.appConfig.showStudyList ? '/' : undefined
appContext.appConfig.showStudyList ? '/studylist' : undefined
}
标签：return,Viewer,appConfig,OHIF,Home,组件,path,studylist,页面 来源： https://blog.csdn.net/Qinyimin001/article/details/106629760
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。