javascript - 如何在React JS中获取div的高度

我正在尝试使用React JS来获取父div的高度。

html结构如下：

<div ref="sectionSlider">
   <div class="detailsOutterDiv">
      <div class="swiper" style="width: 100%;">
         <div class="detailsInnerDiv">
              <div class="slide">
                 <img src="someURl" style="background-color: black;">
              </div>
              <div class="slide">
                  <img src="someURl" style="background-color: black;">
              </div>
              <div class="slide">
                <img src="someURl" style="background-color: black;">
              </div>
          </div>
      </div>

   </div>
   <div class="slider-thumbnails">
         <div class="thumb">
             <img src="someURl">
         </div>
   </div>
</div>

而且css-scss结构是这样的：

.detailsOutterDiv{
  position: relative;
  width: 100%;
  overflow: hidden;
}

.detailsInnerDiv{
  position: relative;
  top: 0px;
  left: 0px;
  right: 0px;
  width: 10000%;
  transition: all 0.5s ease;
}

.slide{
  display: inline-block;
  margin-right: 15px;
}

.slide img{
  width: 100%;
  height: auto;
}


.slider-thumbnails{
  width: 100%;
  padding-top: $primary-margin-xs - 5;
  text-align: center;

  .thumb{
    display: inline-block;
    width: (100% / 12);

    img{
      width: 100%;
      height: auto;
      padding: 0 2px;
    }
  }
}

我正在尝试使用ref="sectionSlider"来获取div的高度。

我试图在componentDidMount中以几种方式做到这一点：

componentDidMount(){
    //First way
    let top = this.refs["sectionSlider"].offsetHeight;

    //Second way
    let top = this.refs["sectionSlider"].clientHeight;

    //Third way
    let top = this.refs["sectionSlider"].getBoundingClientRect().height;

    //Fourth way
    let node = this.refs["sectionSlider"];
    let nodeStyle = window.getComputedStyle(node);
    let top = parseInt(nodeStyle.getPropertyValue('height').replace(/\D/g,''));
}

并且在每种情况下top都是82，这是不正确的。

看起来像 ：



因此，div的高度为523。

知道如何解决吗？

最佳答案

如果问题是（根据您的猜测）未加载图像，则可以执行以下操作：

const Example = React.createClass({
  getInitialState () {
    return {
      imagesLoaded: 0,
    };
  },

  printClientHeight() {
    console.log(this.wrapper.clientHeight)
  },

  updateLoadedImages() {
    this.setState({ imagesLoaded: this.state.imagesLoaded + 1 })
    if (this.state.imagesLoaded = 4) {
      printClientHeight();
    }
  },

  setWrapperRef(el) {
    this.wrapper = el;
  },

  render() {
    return (
      <div ref={this.setWrapperRef}>
        <div className="detailsOutterDiv">
          <div className="swiper" style="width: 100%;">
            <div className="detailsInnerDiv">
              <div className="slide">
                <img src="someURl" style="background-color: black;" onLoad={updateLoadedImages}/ >
              </div>
              <div className="slide">
                <img src="someURl" style="background-color: black;"  onLoad={updateLoadedImages}/>
              </div>
              <div className="slide">
                <img src="someURl" style="background-color: black;"  onLoad={updateLoadedImages}/>
              </div>
            </div>
          </div>
        </div>
        <div className="slider-thumbnails">
          <div className="thumb">
            <img src="someURl"  onLoad={updateLoadedImages}/>
          </div>
        </div>
      </div>
    );
  }
});

显然，您可以通过动态获取图像标签计数来清理很多，但是我想您明白了……