反应获取 div 元素大小不正确答案

【问题标题】：react get div element size incorrect反应获取 div 元素大小不正确
【发布时间】：2017-12-20 19:20:52
【问题描述】：

我发现了一些与此相关的问题，但没有一个不能解决我的问题。所以，我写了这篇文章。如果有任何相关的线程，请告诉我。

我正在尝试获取 div 元素的大小（以 px 为单位），以便可以在其中绘制一些 SVG 组。为此，我在网上搜索了一段时间后编写了以下 React 类。

class ChartBox extends React.Component {
     constructor() {
           super();
           this.state = {width: 0, height: 0}
     }

     componentDidMount() {
         window.addEventListener('resize', () => this.handleResize());
         this.handleResize();
     }

     componentWillUnmount() {
         window.removeEventListener('resize', () => this.handleResize());
     }

     handleResize = () => {
          this.setState({
               width: this.container.offsetWidth,
               height: this.container.offsetHeight
          });
     }

     render() {
         return (
         <div className={this.props.className}>
             <div className={theme.up}>
                  <div className={theme.left}>up.left</div>
                  <div className={theme.right}
                       ref={c => this.container = c}>
                     <p>up.right</p>
                     <p>`${this.state.width}x${this.state.height}`</p>
                  </div>
             </div>
             <div className={theme.down}>
                  <div className={theme.left}> down.left </div>                 
                  <div className={theme.right}>down.right</div>
             </div>
         </div>
         );
     }
}

ChartBox 类从父 React 元素获取最外层 div 元素的样式。对于 ChartBox 类中的所有内部 div 元素，我导入以下 css。

:root {
   --right-width: 100px;
   --top-height: 100px;
   --left-width: calc(100% - var(--right-width));
   --bottom-height: calc(100% - var(--top-height));
}
.up {
   float: left;
   width: 100%;
   height: var(--top-height);
   padding: 0px
}
.bottom {
   float: left;
   width: 100%;
   height: var(--bottom-height);
   padding: 0px      
}
.left {
   float: left;
   width: var(--left-width);
   height: 100%;
   padding: 0px      
}
.right {
   float: left;
   width: var(--right-width);
   height: 100%;
   padding: 0px      
}

如你所想，我试图将最外层的 div 元素分成四个部分，其中最小的 div 元素的大小为 100 像素 x 100 像素。

首先，当我目视检查时，所有元素都已正确安装。但是，返回的值不正确。例如，当我第一次重新加载页面时，它返回不正确的 762 x 18。但是在调整窗口大小后，它会返回正确的大小为 100 x 100。

有什么建议或方法可以解决这个问题吗？

【问题讨论】：

也许可以试试 getBoundingClientRect 即const height = this.node.getBoundingClientRect().height; developer.mozilla.org/en-US/docs/Web/API/Element/…
它也只有在我手动调整窗口大小时才有效......否则，它会像以前一样返回不正确的宽度和高度。
所以当你说它一开始返回不正确的宽度和高度时，是在 componentDidMount 中吗？在给出正确的值之前，它可能需要对虚拟 DOM 进行完整渲染......它在 componentWillReceiveProps 中是否正确？
是的，不正确的来自 compoenetDidMount。也许你是对的，只有在完全渲染后才能获得正确的值。我没有实现 compoenetWillReceiveProps。

标签： javascript css reactjs

【解决方案1】：

我遇到了类似的问题。我不得不为此使用setTimeout(0)。例如：

 handleResize = () => {
    setTimeout(() => {
        this.setState({
           width: this.container.offsetWidth,
           height: this.container.offsetHeight
        });
    }, 0 );
 }

这确保函数调用发生在调用堆栈的末尾和容器完全呈现之后。

更新：

我实际上使用getSnapshotBeforeUpdate 找到了更好的解决方案。不需要设置超时。来自 React 文档：“It enables your component to capture some information from the DOM (e.g. scroll position) before it is potentially changed.”

例如：

getSnapshotBeforeUpdate() {
  let width = this.container.offsetWidth;
  let height = this.container.offsetHeight;
  return { width, height };
}

componentDidUpdate( prevProps, prevState, snapshot ) {
  if (prevState.width !== snapshot.width || prevState.height !== 
    snapshot.height) {
      this.setState({
        height: snapshot.height,
        width: snapshot.width,
      })
  }
}

【讨论】：