無法從 React Ref 獲取 offsetHeight

Question

我試圖在React render方法中獲取div元素的大小。 但它總是offsetHeight,offsetWidth為0 。

我可以在console.log時看到offsetHeight,offsetWidth實際值。

如何在組件呈現后獲取容器 div ref 元素的實際大小？

這是我的實現。

class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            height:0,
            width:0,
        }
        this.containerRef = React.createRef()
    }
    componentDidMount(){
        console.log(this.containerRef)
        //saw offsetWidth and offsetHeightSize (300,700)

          const {offsetHeight,offsetWidth} = this.containerRef.current
          this.setState({
              width:offsetWidth,//getting 0
              height:offsetHeight //getting 0
          })

    }
    render() {
         const {width,height} = this.state
        return (
            <div ref={this.containerRef}>
              {`width:${width}-height:${height}`}
            </div>
        );
    }
}

請幫忙。

謝謝。

Answer 1

反應鈎子解決方案

const useResize = (myRef) => {
  const [width, setWidth] = useState(0)
  const [height, setHeight] = useState(0)

  const handleResize = () => {
    setWidth(myRef.current.offsetWidth)
    setHeight(myRef.current.offsetHeight)
  }

  useEffect(() => {
    myRef.current && myRef.current.addEventListener('resize', handleResize)

    return () => {
      myRef.current.removeEventListener('resize', handleResize)
    }
  }, [myRef])

  return { width, height }
}


const MyComponent = () => {
  const componentRef = useRef()
  const { width, height } = useResize(componentRef)

  return (
    <div ref={myRef}>
      <p>width: {width}px</p>
      <p>height: {height}px</p>
    <div/>
  )
}

基於類的解決方案

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

  componentDidMount () {
    console.log(this.myDiv.current.offsetHeight)
  }

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