Comment obtenir la largeur d'un élément de réaction

Question

J'essaie de créer une entrée de plage qui affiche une info-bulle juste au-dessus du curseur.

Je suis passé en revue quelques exemples JS JS en ligne et il me semble que je dois avoir la largeur de l’élément pour accomplir cela.

Je me demandais donc comment obtenir la largeur des éléments?

Quasiment l'équivalent de la méthode JQuery $(element).width()

Answer 1

    class MyComponent extends Component {
      constructor(props){
        super(props)
        this.myInput = React.createRef()
      }

      componentDidMount () {
        console.log(this.myInput.current.offsetWidth)
      }

      render () {
        return (
        // new way - as of React@16.3
        <div ref={this.myInput}>some elem</div>
        // legacy way
        // <div ref={(ref) => this.myInput = ref}>some elem</div>
        )
      }
    }

Answer 2

Avec crochets :

 const MyComponent = () => {
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current || !ref.current.getBoundingClientRect().width) return;
    console.log('do something with', ref.current.getBoundingClientRect().width);
  }, [ref.current]);
  return <div ref={ref}>Hello</div>;
};