Làm thế nào để có được chiều rộng của một yếu tố phản ứng

Question

Hi Im cố gắng để tạo ra một đầu vào phạm vi đó sẽ hiển thị một tooltip ngay trên ngón tay cái thanh trượt

tôi đã đi qua một số ví dụ vani JS trực tuyến và có vẻ như rằng tôi cần phải có chiều rộng của phần tử để hoàn thành điều đó.

Vì vậy, tôi đã tự hỏi làm thế nào để có được chiều rộng các phần tử?

khá nhiều tương đương với JQuery phương pháp $ (element) .width()

Answer 1

Bạn có thể làm:

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

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

Có câu trả lời khác ra khỏi đó bao gồm kích thước phần tử trong phản ứng. Tôi đề nghị lần sau bạn thực hiện tìm kiếm!

Answer 2

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

     render() { 
     <div ref={input => {this.myInput = input}}>some elem</div> 
     } 
    } 

Nó không hoạt động khi tôi thử vì tôi đang sử dụng các thành phần theo kiểu, cần được chuyển qua innerRef thay vì ref.