我有一个应用程序,我需要动态设置一个元素的高度(让我们说“app-content”)。它取应用程序的“chrome”的高度并减去它,然后设置“app-content”的高度以100%符合这些限制。这是超级简单的香草JS, jQuery,或骨干视图,但我努力弄清楚正确的过程将在React中这样做?

下面是一个示例组件。我想要能够设置应用内容的高度为窗口的100%减去动作栏和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;

当前回答

我觉得这个解决方案很脏,但我们开始吧:

componentDidMount() {
    this.componentDidUpdate()
}

componentDidUpdate() {
    // A whole lotta functions here, fired after every render.
}

现在我就坐在这里,等着大家投反对票。

其他回答

我实际上遇到了类似行为的麻烦,我在一个组件中渲染了一个视频元素,它的id属性,所以当RenderDOM.render()结束时,它加载了一个需要id来找到占位符的插件,但它找不到它。

componentDidMount()中的setTimeout与0ms修复了它:)

componentDidMount() {
    if (this.props.onDidMount instanceof Function) {
        setTimeout(() => {
            this.props.onDidMount();
        }, 0);
    }
}

ReactDOM.render()文档:

如果提供了可选的回调,它将在 组件被呈现或更新。

我不会假装我知道为什么这个函数可以工作,但是window。当我需要在useEffect中使用Ref访问DOM元素时,getComputedStyle 100%的时间为我工作-我只能假设它将与componentDidMount一起工作。

我把它放在useEffect代码的顶部,它似乎迫使效果等待元素被绘制,然后再继续下一行代码,但没有任何明显的延迟,如使用setTimeout或异步睡眠函数。如果没有这个,当我试图访问Ref元素时,它将返回为未定义。

const ref = useRef(null);

useEffect(()=>{
    window.getComputedStyle(ref.current);
    // Next lines of code to get element and do something after getComputedStyle().
});

return(<div ref={ref}></div>);

实际上,有一个比使用request animationframe或timeout更简单、更清晰的版本。我很惊讶居然没人提起这件事: vanilla-js的onload处理程序。 如果可以,使用component did mount,如果不行,只需在jsx组件的onload处理程序上绑定一个函数。如果你想让函数运行每次渲染,也要在返回渲染函数的结果之前执行它。代码看起来是这样的:

runAfterRender = () => { const myElem = document.getElementById("myElem") 如果(myElem) { //做重要的事情 } } 呈现() { this.runAfterRender () 回报( < div onLoad = {this.runAfterRender} > / /更多的东西 < / div > ) }

}

我觉得这个解决方案很脏,但我们开始吧:

componentDidMount() {
    this.componentDidUpdate()
}

componentDidUpdate() {
    // A whole lotta functions here, fired after every render.
}

现在我就坐在这里,等着大家投反对票。