改变元素高度 React Angular

Question

我正在使用 angular 并做出反应（使用 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 消失了，但现在我收到错误 TypeError: undefined is not a function 行 this.refs.emptyCell.forceUpdate().

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

Answer 1

上面的代码是 React 反模式：

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

之后重复

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

Answer 2

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

改变元素高度 React Angular

Change elements height React Angular

html

javascript

css

angularjs

reactjs