我已经尝试使用我的 Meteor + React 项目实现AdminLTE
控制面板引导模板(AdminLTE),并且使用下面的代码,一切都运行良好(除了一件事 - 见下文)MasterPage
:
import React from 'react'
import { Header } from './masterpage/Header'
import { MainSideBar } from './masterpage/MainSideBar'
import { ControlSideBar } from './masterpage/ControlSideBar'
import { Footer } from './masterpage/Footer'
export const MasterPage = ({content}) =>
<div className="hold-transition skin-green sidebar-mini">
<div className="wrapper">
<Header />
<MainSideBar />
{content}
<Footer />
<ControlSideBar />
<div className="control-sidebar-bg"></div>
</div>
</div>
这是我的路由发生的情况:
import { FlowRouter } from 'meteor/kadira:flow-router'
import React from 'react'
import { mount } from 'react-mounter'
//Layouts and Pages
import { MasterPage } from '../../ui/layouts/MasterPage'
import { HomePage } from '../../ui/pages/HomePage'
FlowRouter.route('/', {
name: 'homepage',
action() {
mount(MasterPage, {
content: <HomePage />
})
}
})
实施此操作后,一切都很好,除了单击切换按钮时没有打开控制侧边栏:
<li>
<a href="#" data-toggle="control-sidebar">
<i className="fa fa-gears"></i>
</a>
</li>
我试过通过 CSS 打开它,这似乎工作正常。我遇到的另一个问题是现在它不会拉伸窗口的整个宽度。底部有大量的空白区域刚刚没有使用,而且看起来不太好。
所有这些问题都是从我实施的那一刻开始的FlowRouter
(在那之前效果很好)。我执行FlowRouter
不正确吗?如果是这样,我该怎么办?
任何帮助将非常感激!