Javascript 如何从我的组件中的html访问子级？

我想创建一个覆盖菜单组件。我想创建一个组件来渲染菜单打开按钮

菜单是在服务器端创建的，所以我需要选择子菜单将它们添加到我的组件中。我尝试过这样的事情，但这当然不起作用。 解决我的问题的最佳做法是什么

<div id="menu-btn">
  <ul>
    <nav class="overlay-navigation">
      <ul>
        <li><a href="#">a</a></li>
        <li><a href="#">b</a></li>
        <li><a href="#">c</a></li>
      </ul>
    </nav>
  </ul>
</div>

render() {
        return (
            <>
            <a data-menuopen={ !this.state.open } onClick={ () => this.setState( { open: !this.state.open } ) } href="#" class="menu-btn">
                { !this.state.open ? <img class="svg" src="data/images/menu.svg" /> : "" }
                { this.state.open ? <img class="svg" src="data/images/close.svg" /> : "" }
            </a>

            <Portal>
                <div className="overlay-menu">
                    { this.props.children }
                </div>
            </Portal>
            </>
        );
    }

render（）{
返回(
{this.props.children}
);
}

Portal是应该拥有覆盖的组件吗？是的，完全正确……因此，为什么不尝试将props.children作为props传递，并在门户的渲染中添加覆盖。未定义props.children