Question

有一个reactjs组件，我需要在组件中获得dom的高度。但我失败了，我不知道哪个是错的。这是我的代码：

＆＃13;

class ImgCropper extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      containSize: { width: 0, height: 0 },
    };
  }

  componentDidMount() {
    console.log('=================组件的宽高：', this.image.offsetWidth, this.image.offsetHeight);
    this.middle.style.width = `${this.contain.offsetWidth}px`;
    this.middle.style.height = `${this.contain.offsetWidth}px`;
    // 配置图片的宽高
    this.image.style.transform = `translate(0px,${parseInt((this.contain.offsetHeight - this.image.height) / 2, 10)}px)`;
  }

  render() {
    return (<div ref={((div) => { this.contain = div; })} className={styles.container}>
      <div id="cover-top" ref={(div) => { this.top = div; }} className={styles.coverTop}>
        <a href="">
          <input id="imageFile" name="image" type="file" accept="image/gif, image/jpeg, image/jpeg" />点击上传
        </a>
        <button >选择图片</button>
        <input id="x" name="x" />
        <input id="y" name="y" />
        <input id="width" name="width" />
        <input id="height" name="height" />
      </div>
      <div id="cover-middle" ref={(div) => { this.middle = div; }} className={styles.coverMiddle} />
      <div id="cover-down" ref={(div) => { this.down = div; }} className={styles.coverDown}>
        <button type="button" >获得裁剪参数</button><span id="params">12121</span>
      </div>
      <img id="image" ref={(image) => { this.image = image; }} className={styles.image} draggable="true" src={test} />
    </div>
    );
  }

＆＃13;

控制台日志显示dom的高度始终为0。

Answer 1

您忘了考虑加载图片时间。在触发componentDidMount时，呈现了React组件，但<img>元素才开始从给定的URL加载图像。在这里，您需要将onLoad <img>事件与函数绑定，并检索该函数内的图像大小。

示例代码：

class ImgCropper extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      containSize: { width: 0, height: 0 },
    };
    this.onImageLoad = this.onImageLoad.bind(this);
  }

  onImageLoad() {
    console.log('=================组件的宽高：', this.image.offsetWidth, this.image.offsetHeight);
    this.middle.style.width = `${this.contain.offsetWidth}px`;
    this.middle.style.height = `${this.contain.offsetWidth}px`;
    // 配置图片的宽高
    this.image.style.transform = `translate(0px,${parseInt((this.contain.offsetHeight - this.image.height) / 2, 10)}px)`;
  }

  render() {
    return (<div ref={((div) => { this.contain = div; })} className={styles.container}>
      <div id="cover-top" ref={(div) => { this.top = div; }} className={styles.coverTop}>
        <a href="">
          <input id="imageFile" name="image" type="file" accept="image/gif, image/jpeg, image/jpeg" />点击上传
        </a>
        <button >选择图片</button>
        <input id="x" name="x" />
        <input id="y" name="y" />
        <input id="width" name="width" />
        <input id="height" name="height" />
      </div>
      <div id="cover-middle" ref={(div) => { this.middle = div; }} className={styles.coverMiddle} />
      <div id="cover-down" ref={(div) => { this.down = div; }} className={styles.coverDown}>
        <button type="button" >获得裁剪参数</button><span id="params">12121</span>
      </div>
      <img id="image" ref={(image) => { this.image = image; }} className={styles.image} draggable="true" src={test} onLoad={this.onImageLoad} />
    </div>
    );
  }
}

如何通过reactjs获得dom的真实高度？

1 个答案: