правильно установить высоту компонента портала

Question

У меня проблема с созданием портала с такой же высотой, что и основной элемент. У меня есть внешний компонент, который отображает компонент портала, но я должен дождаться, пока основной компонент будет смонтирован, прежде чем создавать мой портал, потому что мне нужна полная высота родительского элемента.

Родительский код:

render() {
  const showChildren = this.rendercount > 0;
  this.rendercount++;
  return (
    <div onMouseMove={this.onMove} onMouseLeave={this.onLeave}>
      //stuff
      {showChildren && <ChildComponent notify={this.notify} />}
      //other stuff
    </div>
  );
}

Код дочернего компонента:

const ChildComponent = ({
  from,
  type,
  src,
  notify,
  magicOffset,
  targetY,
  resetY
}) => {
  const appHeight = document.getElementById('app').clientHeight;
  const innerWidth = window.innerWidth;
  const fromX = from.x * innerWidth;
  const fromY = from.y * appHeight;
  const itemType = itemTypes.get(type);

  document.getElementById('el').style.maxHeight = `${
    appHeight + magicOffset
  }px`;
  document.getElementById('el').style.height = `${appHeight + magicOffset}px`;

  //more code...

  return ReactDOM.createPortal(
    <animated.img
      style={{
        position: 'absolute',
        width: `${itemType.width}px`,
        transform: transform([x, y])
      }}
      src={src}
    />,
    document.getElementById('el')
  );
};

проблема в том, что document.getElementById ('app'). ClientHeight не является окончательной высотой приложения, чего-то не хватает.

Спасибо