当我在list.map（）内部创建侧边栏下拉菜单时，它不会出现问题
Sidebar-dropdown menu doesn't whork when I create it inside the list.map()

当我在list.map（）方法中创建它时，我的侧边栏下拉菜单没有打开，而在此方法之外创建它时，它可以正常工作。

下面的代码显示了jsx，它通过list.map生成了我的侧边栏下拉菜单，并且单击不起作用：

 const listMenu = this.state.bestiaryList.map((bestiary) => (
      <li key={bestiary.id} className="sidebar-dropdown">
        <a href="#">
          <span>{bestiary.name}</span>
        </a>
        <div className="sidebar-submenu">
          <ul>
            <li>
              <a href="#">Dashboard 2</a>
            </li>
          </ul>
        </div>
      </li>
    ));  

下面的代码显示了jQuery功能，它使在list.map之外创建的菜单上单击工作：

jQuery(function ($) {
    $(".sidebar-dropdown > a").click(function () {
      $(".sidebar-submenu").slideUp(200);      
      if (
        $(this)
          .parent()
          .hasClass("active")
      ) {
        $(".sidebar-dropdown").removeClass("active");
        $(this)
          .parent()
          .removeClass("active");
      } else {
        $(".sidebar-dropdown").removeClass("active");
        $(this)
          .next(".sidebar-submenu")
          .slideDown(200);
        $(this)
          .parent()
          .addClass("active");
      }
    });

    $("#close-sidebar").click(function () {
      $(".page-wrapper").removeClass("toggled");
    });
    $("#show-sidebar").click(function () {
      $(".page-wrapper").addClass("toggled");
    });
  });

最后，在list.map之外创建的菜单正常工作：

<li className="sidebar-dropdown">
                    <a href="#">
                      <i className="fa fa-tachometer-alt" />
                      <span>Dashboard</span>
                      <span className="badge badge-pill badge-warning">New</span>
                    </a>
                    <div className="sidebar-submenu">
                      <ul>
                        <li>                          
                          <a href="#">Dashboard 1                            
                          </a>
                        </li>
                        <li>
                          <a href="#">Dashboard 2</a>
                        </li>
                        <li>
                          <a href="#">Dashboard 3</a>
                        </li>
                      </ul>
                    </div>
                  </li>

如果有人能帮助我，我将不胜感激。