React從引用獲取HTMLElement屬性到自定義組件

Question

從參考中獲取HTML屬性到DOM元素非常簡單。

<div ref={element => this.myDiv = element}> 
    <h1>Bla bla</h1> 
</div> 

... 

componentDidMount() => { 
    console.log(this.myDiv.clientHeight); // Gives desired result 
} 

但是，你如何做一個自定義組件的ref？

<CustomElement ref={element => this.myDiv = element}> 
    <h1>Bla bla</h1> 
</CustomElement> 

... 

componentDidMount() => { 
    console.log(this.myDiv.clientHeight); // Undefined 
} 

控制檯記錄整個ref對象也沒有幫助。我從中檢索到的是一個包含狀態，道具，參考和更新器作爲屬性的對象，但DOM特定的屬性無處可查。

Answer 1

這是因爲它沒有呈現給DOM。你怎樣才能獲得DOM屬性的東西，而不是呈現給DOM？如果您想獲取DOM屬性，您將需要獲取由該反應組件呈現的實際HTML元素的引用。

我會使用一個div或一些html元素作爲渲染函數中的頂級元素，並獲得一個ref。