Question

我正在尝试在div方法中获取React render元素的大小。但总有offsetHeight,offsetWidth作为0。

当offsetHeight,offsetWidth时，我可以看到console.log的实际值。

渲染组件后如何获取容器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

React Hook 解决方案

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>
    )
  }
}

无法从React Ref获取offsetHeight

1 个答案: