反应如何在我的组件中从 html 访问孩子？

Question

我想创建一个覆盖菜单反应组件。 我想创建一个呈现菜单打开按钮的组件。

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

<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>
            </>
        );
    }