react怎么獲取dom元素的寬度和高度

小億
490
2024-01-19 17:10:04
欄目: 編程語言

在React中，可以使用ref來獲取DOM元素的寬度和高度。

首先，在組件中創(chuàng)建一個(gè)ref對(duì)象，然后將它傳遞給要獲取寬度和高度的DOM元素：

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

  componentDidMount() {
    const element = this.myRef.current;
    const width = element.offsetWidth;
    const height = element.offsetHeight;
    console.log('Width:', width);
    console.log('Height:', height);
  }

  render() {
    return <div ref={this.myRef}>Hello, World!</div>;
  }
}

在componentDidMount生命周期方法中，可以使用ref.current來獲取DOM元素的引用。然后，可以使用offsetWidth和offsetHeight屬性來獲取寬度和高度。

請(qǐng)注意，要確保在組件渲染后才能獲取DOM元素的寬度和高度，因此將獲取寬度和高度的代碼放在componentDidMount生命周期方法中。

另外，也可以使用其他生命周期方法，如componentDidUpdate，來獲取DOM元素的寬度和高度。

0 踩