Измерьте высоту элемента в пользовательском интерфейсе семантической реакции

Question

Я пытаюсь измерить высоту компонента. Если я пытаюсь получить ссылку и найти offsetHeight, ссылка всегда будет нулевой. Итак, как измерить высоту для компонента response-semantic-ui.

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

здесь this.container всегда нулевой

Какие есть еще способы измерить высоту компонента response-semantic-ui?

Answer 1

Вы должны использовать this.container.offsetHeight в componentDidMount или же componentDidUpdate методы.

Можно обернуть ваши компоненты в <div ref={...}></div>, Тогда вы можете получить высоту div, Если ваш верхний компонент не имеет полей, высота div и ваш компонент будут одинаковыми.

Замечания:

1. Когда атрибут ref используется в пользовательском компоненте, объявленном как класс, обратный вызов ref получает смонтированный экземпляр компонента в качестве аргумента.

2. Когда атрибут ref используется в элементе HTML, обратный вызов ref получает базовый элемент DOM в качестве аргумента.

3. Вы не можете использовать атрибут ref на функциональных компонентах, потому что у них нет экземпляров

Возвращаемые значения от 1 и 2 имеют разные свойства и методы. Существует документ https://reactjs.org/docs/refs-and-the-dom.html

Answer 2

@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, …}

Answer 3

@bogdan-surai, можете ли вы проверить следующий код:

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