Как получить значения getBoundingClientRect элемента дочернего компонента?

Question

[Владимир Голубь]

В дочернем компоненте есть элемент картинка, мне нужна ее высота.

// Дочерний комопнент с картинкой

class Img {
constructor(props) {
  super(props);

  this._img = null;
}

getImageHeight = () => {
  return this._img.getBoundingClientRect();
};

return (
  <div>
    <img ref={ref => this._img = ref} />
  </div>
)
}

// Основной компонент

class ImgBlock {
constructor(props) {
  super(props);

  this._imgEl = null;
}

componentDidMount() {
  console.log(this._imgEl.getImageHeight());
}

return (
  <div>
    <Img ref={ref => this._imgEl = ref} />
  </div>
)
}

Как вызвать метод дочернего компонента ?

Answer 1

[Алексей Уколов]

Вам не нужно вызывать метод (и сделать этого нельзя), но вы можете выполнить запрос прямо на рефе:

componentDidMount() {
  console.log(return this._imgEl.getBoundingClientRect());
}

Comments

[Владимир Голубь]

так у меня будет размер не только картинки а всего div.

[Алексей Уколов]

А, да, не обратил внимания. Вам нужно через пропсы передавать функцию refImg и таким образом поднимать ref картинки к родителю.