javascript - Bagaimana saya bisa mendapatkan koordinat dari elemen tertentu di react tsx

Saya menggunakan React dengan Typescript dan ingin tahu bagaimana cara mengetahui koordinat dari sub-komponen dalam kelas React yang saya buat.

Saya sudah menemukan artikel ini: https://medium.com/@chung.andrew7/finding-the-absolute-positions-of-react-components-fda1c5bc9ab

Dan ini: Mendapatkan posisi offsetTop div di React

Di sini dinyatakan bahwa ini biasanya dilakukan dengan getBoundingClientRect(), tetapi saya tidak dapat menemukan cara bagaimana melakukan ini dengan TypeScript, atau properti atau ref apa yang akan ditempatkan pada ini.

Jika saya menetapkan komponen saya sebagai _searchBarPreview: React.RefObject<{}>; dengan melewatkan berikut ini sebagai properti "ref" pada elemen:ref={this._searchBarPreview}, saya sama sekali tidak bisa mengakses fungsi yang disebutkan pada objek itu.

Yang berhasil adalah menetapkan komponen anak yang ingin saya dapatkan kliennya berdasarkan id dan memperoleh koordinat melalui:

document.getElementById('blablablablabla').getBoundingClientRect();

tapi pasti ada cara yang lebih baik.

Ada panduan cepat?

Jawaban #1

Sepertinya itu satu-satunya cara atau kamu bisa menggunakan react-dom

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = React.createRef()
    const data = ReactDOM
      .findDOMNode(this.myRef)
      .getBoundingClientRect();
  }

  render() {
    return <div ref={this.myRef} />
  }
}