相关疑难解决方法(0)

我有一个应用程序,我需要动态设置元素的高度(让我们说"app-content").它需要应用程序的"chrome"的高度并减去它,然后将"app-content"的高度设置为在这些约束内适合100%.这对于vanilla JS,jQuery或Backbone视图来说非常简单,但是我很难弄清楚在React中执行此操作的正确流程是什么？

下面是一个示例组件.我希望能够设置app-content的高度是窗口减去的尺寸为100%ActionBar和BalanceBar,但我怎么知道当一切都变得和我在哪里会把计算的东西,在这个阵营类？

/** @jsx React.DOM */
var List = require('../list');
var ActionBar = require('../action-bar');
var BalanceBar = require('../balance-bar');
var Sidebar = require('../sidebar');
var AppBase = React.createClass({
  render: function () {
    return (
      <div className="wrapper">
        <Sidebar />
        <div className="inner-wrapper">
          <ActionBar title="Title Here" />
          <BalanceBar balance={balance} />
          <div className="app-content">
            <List items={items} />
          </div>
        </div>
      </div>
    );
  }
});

module.exports = AppBase;

这是我对React的一个反复出现的问题.componentDidMount保证在第一次渲染组件时触发该方法,因此它似乎是一个自然的地方,可以进行高度和偏移等DOM测量.但是,很多时候,在组件生命周期的这个阶段,我收到了错误的样式读数.该组件是在DOM,当我与调试器打破,但它尚未在屏幕上绘制.我的问题是宽度/高度设置为100%的元素.当我进行测量时componentDidUpdate- 一切正常,但此方法不会在组件的初始渲染时触发.

所以我的问题是 - 什么时候被componentDidMount解雇,因为在完成所有浏览器绘制之后它显然没有被触发.

编辑: 此Stackoverflow问题处理相同的主题:

它还引用了这个解释会发生什么的github对话

我正在使用webpack-dev-server来加载我的所有资产,包括CSS.目前,我的CSS在JavaScript之后加载,这导致我的应用程序问题在某些依赖于布局存在的地方.

如何确保在JavaScript执行之前加载CSS？

我认为必须有一种方法可以做到这一点module,也许我可以勾选一个回调？或者可能通过配置样式加载器来优先考虑？

这是我的index.js:

import './styles/main.scss';
import './scripts/main.js';

if (module.hot) {
  module.hot.accept();
}

这是我的样式加载器:

{
        test: /\.(scss)$/,
        loader: 'style!css?&sourceMap!postcss!resolve-url!sass?sourceMap'
},

在这个样式加载器Github问题上也提出了类似的问题:https://github.com/webpack/style-loader/issues/121