javascript-如何在React中使一个div的高度等于另一个div的高度？

我想用类覆盖的 div 覆盖带有主类的 div。只有当我硬编码覆盖的高度和宽度时它才有效。这是行不通的，因为我正在渲染 main 的多个实例并且它们具有不同的高度。我想使用一个javascript脚本来动态调整叠加层的高度到main。

.overlay {

  position: absolute;

  height: 500px;

  width: 500px;

  background-color: rgba(0, 0, 0, .22);

}

.maindiv {

  position: relative;

}

<div class="main">

  <div>

    <h1>

      header

    </h1>

  </div>

  <div class="overlay"></div>

  <Table class="maindiv">

    <th>adfasda</th>

    <th>adfasda</th>

    <th>adfasda</th>

    <th>adfasda</th>

    <tr>

      <td>asdf</td>

      <td>asdf</td>

      <td>asdf</td>

      <td>asdf</td>

    </tr>

    <tr>

      <td>asdf</td>

      <td>asdf</td>

      <td>asdf</td>

      <td>asdf</td>

    </tr>

    <tr>

      <td>asdf</td>

      <td>asdf</td>

      <td>asdf</td>

      <td>asdf</td>

    </tr>

    <tr>

      <td>asdf</td>

      <td>asdf</td>

      <td>asdf</td>

      <td>asdf</td>

    </tr>

  </Table>

</div>