Question

我发现了一些相关的问题，但没有一个问题无法解决我的问题。所以，我写了这篇文章。如果有任何相关主题，请告诉我。

我正在尝试获取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元素的大小为100px×100px。

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

解决此问题的任何建议或意见？

Answer 1

我有一个类似的问题。我必须为此使用[0-Integer.MAX] DAYS [0-Integer.MAX] MONTHS [0-Integer.MAX] YEARS。例如：

setTimeout(0)

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

更新：

实际上，我使用getSnapshotBeforeUpdate找到了更好的解决方案。不需要设置超时。从React文档中：“ handleResize = () => { setTimeout(() => { this.setState({ width: this.container.offsetWidth, height: this.container.offsetHeight }); }, 0 ); }”

例如：

It enables your component to capture some information from the DOM (e.g. scroll position) before it is potentially changed.

反应得到div元素大小不正确

1 个答案: