从React中的隐藏溢出中弹出

Question

我正在尝试创建一个带有子菜单的可滚动菜单，当您将鼠标悬停在React中的父菜单项上时，该子菜单会弹出。

我已经找到了使用css / js https://css-tricks.com/popping-hidden-overflow/的解决方案，但是我很难将其移植到React，特别是JS部分。任何帮助将不胜感激。

HTML

[Resource(name=name1, content=content1), Resource(name=name2, content=content2), Resource(name=name3, content=content3)]

CSS

<div class="wrapper">
  <ul>
    <li>Abc</li>
    <li>Def</li>
    <li>Ghi</li>
    <li>Jkl</li>
    <li class="parent">Mno >
      <div class="wrapper">
        <ul>
          <li>Abc</li>
          <li>Def</li>
          <li>Ghi</li>
          <li>Jkl</li>
          <li class="parent">Mno >
            <div class="wrapper">
              <ul>
                <li>Abc</li>
                <li>Def</li>
                <li>Ghi</li>
                <li>Jkl</li>
                <li>Mno</li>
                <li>Pqr</li>
                <li>Stu</li>
                <li>Vw</li>
                <li>Xyz</li>
              </ul>
            </div>
          </li>
          <li>Pqr</li>
          <li>Stu</li>
          <li>Vw</li>
          <li>Xyz</li>
        </ul>
      </div>
    </li>
    <li>Pqr</li>
    <li>Stu</li>
    <li>Vw</li>
    <li>Xyz</li>
  </ul>
</div>

JS

.wrapper {
  // the wrapper acts as the submenus' positioned parent
  position: relative;
}

ul {
  width: 200px;
  max-height: 250px;

  // use scrolling if necessary, but don't show a horizontal scrollbar
  overflow-x: hidden;
  overflow-y: auto;
}

li {
  // the submenus cannot have a positioned parent inside the scrollable list
  position: static;

  // submenu
  .wrapper {
    // position on top of the menu item
    position: absolute;

    // these are not useful because our positioned parent is not the menu item
    //top: 0;
    //left: 75%;

    // show on top of the menu item
    z-index: 10;

    // do not show the submenu by default
    display: none;
  }

  // display the submenu when we hover on the menu item
  &:hover > .wrapper {
    display: block;
  }
}

// for decoration purposes
$c1: #0E8CE0;
$c2: #0064B3;
$c3: #00B99B;

ul {
  margin: 1em;
  color: white;
  font-family: sans-serif;
  font-size: 16px;
}

li {
  padding: 1em;

  ul {
    margin: 0;
  }

  .wrapper {
    cursor: auto;
    li {
      padding: 0.5em;
    }
  }

  &:nth-child(2n) {
    background: $c1;
  }
  &:nth-child(2n+1) {
    background: $c2;
  }
  &.parent {
    background: $c3;
    cursor: pointer;
  }
}