Question

我正在使用角度和反应（使用ng-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已消失，但现在我收到错误TypeError: undefined is not a function在this.refs.emptyCell.forceUpdate()行。

emptyCell的高度正确更改，一切正常，但我仍然在foreUpdate()方法上收到错误。有人有什么想法吗？也许还有其他方法可以做我想做的事情？

Answer 1

上面的代码是React反模式：

在componentDidMount生命周期中，测量高度是否正确，但是你使用setState（）＆amp;＆amp;不应在此生命周期中调用forceUpdate（）。 setState计算差异并重新渲染反应组件。 forceUpdate（）在setState（）

之后是一个副本

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

Answer 2

事实证明，在我的表元素周围包装<div>是最初的问题，这是我的代码的所有奇怪错误和行为的原因。

更改元素高度React Angular

2 个答案: