Как получить ширину реагирующего элемента

Я пытаюсь создать диапазон ввода, который отображает всплывающую подсказку прямо над ползунком.

Я просмотрел несколько примеров ванильного JS онлайн, и мне кажется, что для этого мне нужна ширина элемента.

Так что мне просто интересно, как получить ширину элементов?

В значительной степени эквивалент метода JQuery $(element).width()

Ответы

Ответ 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 [email protected]
        <div ref={this.myInput}>some elem</div>
        // legacy way
        // <div ref={(ref) => this.myInput = ref}>some elem</div>
        )
      }
    }

Ответ 2

С крючками:

const MyComponent = () => {
  const ref = useRef(null);
  useEffect(() => {
    const width = ref.current ? ref.current.offsetWidth : 0;
    console.log('width', width);
  }, [ref.current]);
  return <div ref={ref}>Hello</div>;
};

Ответ 3

Вы можете сделать:

class MyComponent extends Component {
  componentDidMount () {
    console.log(this.refs.bla.offsetWidth)
  }

  render () {
    <div ref="bla">some elem</div>
  }
}

Там есть другие ответы, охватывающие размеры элементов в React. Я предлагаю в следующий раз выполнить поиск!