Question

我正在尝试测量组件的高度，如果我尝试获取ref并找到offsetHeight，则ref总是返回null。那么如何测量react-semantic-ui组件的高度。

<Container ref={rf=>this.container=rf} style={{overflowY:"auto"}}>
    <Item.Group divided >
        <ItemList items={items}></ItemList>
    </Item.Group>
</Container>

此处 this.container 始终为 null

还有哪些其他方法可以测量react-semantic-ui组件的高度？

Answer 1

您应该在this.container.offsetHeight或componentDidMount方法中使用componentDidUpdate。

可以将您的组件包装到<div ref={...}></div>中。然后你可以获得div的高度。如果较高的组件没有边距，div的高度和组件将是相同的。

注意：

当ref属性用于声明为类的自定义组件时，ref回调接收组件的已挂载实例作为其参数。
当在HTML元素上使用ref属性时，ref回调接收底层DOM元素作为其参数。
您可能在功能组件上使用ref属性，因为它们没有实例

1和2的返回值具有不同的属性和方法。有一个文档https://reactjs.org/docs/refs-and-the-dom.html

Answer 2

@ bogdan-surai，您可以测试以下代码：

  componentDidMount() {
    const container = this.container;
    if (!container) {
      return;
    }
    const specs = container.getBoundingClientRect();
    console.log(specs);
  }

Answer 3

@ salman.zare是的。 componentDidMount刚刚解雇时，它不起作用。我猜原因是当时身高真的等于0。但我们可以在以后的几个小时内运行setInterval以获得身高。

此代码适用于我

  componentDidMount() {

        this.intervalId = setInterval(() => {

           const container = this.container;
           if (!container) {
              return;
           }
           const specs = container.getBoundingClientRect();
           console.log(specs);
           console.log(this.scrollComponent.offsetHeight);

           this.setState(() => ({ height: specs.height }));
        }, 100);


    }

然后我在浏览器的控制台中看到它。

DOMRect {x: 0, y: 120, width: 693, height: 0, top: 120, …}
DOMRect {x: 0, y: 16, width: 678, height: 4068, top: 16, …}

在语义反应ui中测量元素的高度

3 个答案: