React在componentDidMount无法正确获取dom宽高的问题

背景

在开发过程中, 一些场景我们需要获取在DidMount声明周期获取dom元素的height或width,有时候会发现无法获取正确的值,需要加入setTimeout来获取。 其实这里加setTimeout来获取也是不稳定的。

原因

这是因为webpack在style-loader, less-loader, css-loader 加入sourceMap打包的时候先运行了生成dom的js,再通过js引入css

解决方案

1.去掉sourceMap
2.提取编译后的css在js之前加载

推荐阅读更多精彩内容