已经基本弄好了一个AdminLTE的ReactJS的版本了，
但是现在有个小问题，跳转到Main页面后，内容显示区域的高度没有撑满整个屏幕：
而之前了解过，是adminlte的app.js中，计算显示内容的高度的
此处该app.js也已经生成打包到了vendor.bundle.js中了，也执行过了。
不知道为何高度不对。
之前高度是正常的。
再随便点击一下菜单，展开后，高度就自动正常了：
看到React中的wrapper的高度就只有442
不过navi导航栏高度倒是高一点：579
但是都没有撑满屏幕高度。
点开左边导航栏，还是这个高度：
类似的，点击其他菜单，比如 系统管理，结果整个高度就自动计算更新了：
所以去查查，点击一级菜单时，触发了哪些js的计算
Adminlte 高度
关于.content-wrapper高度的问题 · Issue #1473 · almasaeed2010/AdminLTE
通过研究adminlte的代码，看到了：
里面很多地方，去调用
$.AdminLTE.layout.fix()
去计算和调整高度，包括sidebar导航栏的高度。
而之所以能找到这个地方，是因为：
从菜单的点击中，找到，只要点击了：
treeview-menu
好像就可以触发高度更新。
所以去搜了：
treeview-menu
找到了：
里面调用的：
//Fix the layout in case the sidebar stretches over the height of the window _this.layout.fix(); |
就是前面说的：
$.AdminLTE.layout.fix()
去调整高度的。
【总结】
所以去把调整高度的代码，加到对应的，生效的地方：
rse_web/src/pages/main/main.js
import $ from ‘jquery’; componentDidMount(){ console.log(`Main componentDidMount`); // console.log($); // console.log($.AdminLTE); // console.log($.AdminLTE.layout); // Note: fixbug for first load main page main content not full height if ($ && $.AdminLTE && $.AdminLTE.layout) { $.AdminLTE.layout.fix(); } } |
注意：
此处要确保页面已经加载完毕，否则之前放到navigation-menu.js等地方中，$.AdminLTE.layout都是没有定义，无法使用：$.AdminLTE.layout.fix()
然后进入Main页面后，调用了fix后，页面高度就正常了：
