在React組件中獲取子元素的高度

在React組件中，我希望能夠計算每個子容器（在本例中爲三個h3元素）的組合高度，以便我可以計算出精確值動畫處理其高度轉換時，我父母div的高度。我已經看到了使用基本js以及使用組件安裝方法的例子，但是如何僅使用JavaScript來獲得這些元素的高度呢？在React組件中獲取子元素的高度

class Div extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
     <h3>Description One</h3> 
 
     <h3>Description Two</h3> 
 
     <h3>Description Three</h3> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<Div />, app);

div { 
 
    background-color: pink; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="app"></div>

來源

2017-10-22 Jimmy

是什麼「ES6孩子」？無論如何，嘗試這樣做通常是不值得的。只是動畫'最大高度'。 – 2017-10-22 04:09:52

在反應，操作DOM，你需要使用參考文獻：React Docs - Adding a Ref to a DOM element。

在你的榜樣，爲您<h3>元素，你會做這樣的事情：

<h3 ref={(elem) => this.Line1 = elem}>Description One</h3> 
    <h3 ref={(elem) => this.Line2 = elem}>Description Two</h3> 
    <h3 ref={(elem) => this.Line3 = elem}>Description Three</h3>

一旦你有一個參考的元素，你可以使用方法上的任何DOM元素的&性能。例如，爲了獲得它的高度，你可以使用Element.clientHeight：

calcHeight() { 
    return this.Line1.clientHeight + this.Line2.clientHeight + this.Line3.clientHeight; 
}

Working JSFiddle

來源

2017-10-22 01:04:36 Jaxx

謝謝Jaxx！但是，當我嘗試此方法時，出現以下錯誤：「Uncaught TypeError：無法讀取未定義的屬性」clientHeight「。當我試圖返回calcHeight（）或者{this.Line1.clientHeight}時，即使當我綁定到構造函數時，我也會得到這個錯誤。 [請看這個jsfiddle]（http://jsfiddle.net/qt7n5mmu/），謝謝！ – Jimmy

@Jimmy嗯，這很奇怪。我很難檢查你鏈接了錯誤的JSFiddle，但請看下面的內容，這幾乎是我給你的代碼（只添加了將結果傳遞給狀態以將其打印在頁面上）：http://jsfiddle.net/tda6kd9c /。如你所見，按預期工作。 – Jaxx

謝謝@Jaxx。我不確定是什麼錯，但額外的小提琴幫助，它看起來像addin'this.calcHeight（）''componentDidMount'幫助。 – Jimmy

在React組件中獲取子元素的高度

回答

相關問題