更改元素高度 React Angular答案

【问题标题】：Change elements height React Angular更改元素高度 React Angular
【发布时间】：2015-05-19 03:25:35
【问题描述】：

我正在使用 angular 和 react（使用 ng-react），我正在尝试更改一个元素的高度以匹配另一个元素的高度。我有包含这两个元素的 react 组件，如下所示：

render: function() {
 return (
     <div>
        <div className="absolute" ref="absoluteCell">foo</div>
        <th ref="emptyCell" style={this.state.style}></th>
     </div>
 )
}

所以我想设置空单元格的高度以匹配绝对单元格的高度。我试过像这样使用componentDidMount：

getInitialState: function() {
    return {
        style: {
            height: '30px'
        }
    }
},
componentDidMount: function() {
    var absoluteCellHeight = this.refs.absoluteCell.getDOMNode().offsetHeight;
    this.setState({
        style: {
            height: absoluteCellHeight
        }
    });
    this.refs.emptyCell.forceUpdate();
}

但我不断收到讨厌的错误Cannot read property 'getDOMNode' of undefined。还有其他方法可以实现我想要的吗？

更新：我已经更改了一些代码（已在上面更新），现在错误 Cannot read property 'getDOMNode' of undefined 消失了，但现在我在行 this.refs.emptyCell.forceUpdate() 上收到错误 TypeError: undefined is not a function。

emptyCell 的高度正确更改并且一切正常，但我仍然在 foreUpdate() 方法上遇到该错误。有人知道吗？也许其他方式来做我想做的事？

【问题讨论】：

代码似乎没问题，哪个引用未定义？
我已经更新了我的问题。任何如何以其他更好的方式执行此操作的建议都会很棒，因为我已经读过在 componentDidMount 中调用 setState 是不好的做法。

标签： javascript html css angularjs reactjs

【解决方案1】：

上面的代码是一个 React 反模式：

在componentDidMount生命周期中，测量高度是否正确，但是，在此生命周期中不应调用您对 setState() && forceUpdate() 的使用。 setState 计算差异并重新渲染反应组件。 forceUpdate() 在 setState() 之后是重复的

为实现您的目标，请将更改 emptyCell 样式的逻辑移至 componentDidUpdate 生命周期，这样您就有机会更新渲染的 DOM。

【讨论】：

感谢您的回答。出于某种原因，当我只有 setState() 而没有 forceUpdate() 时，我的 emptyCell 的高度不会改变。我不知道为什么。关于将逻辑移动到componentDidUpdate，我不知道如何调用componentDidUpdate，所以我可以在那里制作我的逻辑。我尝试过更改道具，但 componentDidUpdate 永远不会触发。

【解决方案2】：

事实证明，将<div> 包裹在我的表格元素周围是最初的问题，它是导致我的代码出现所有奇怪错误和行为的原因。

【讨论】：