Question

将HTML属性从ref元素转换为DOM元素非常简单。

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

...

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

但是，对于自定义组件的引用，您如何做同样的事情？

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

...

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

控制台记录整个ref对象也没有帮助。我从中检索的是一个以state，props，ref和updater为属性的对象，但是DOM特定属性无处可寻。

Answer 1

那是因为它没有呈现给DOM。如何在没有呈现给DOM的东西上获得DOM属性？如果要获取DOM属性，则需要获取由该react组件呈现的实际HTML元素的引用。

我会使用div或某个html元素作为渲染函数中的顶级元素并获得参考。

从ref到自定义组件的React获取HTMLElement属性

1 个答案: